Question

＆＃13;

 #btnNext {
        border: 0px solid #FFF ;
        box-shadow: none ;
        filter: brightness(0) invert(1) ;
        height: 20px ;
        opacity: .3 ;
        padding: 0px ;
        visibility: visible ;
        position: none ;
        bottom: 0px ;
        right: 15px ;
        z-index: 999 ;
    } 
    #btnPrevious {
        border: 0px solid #FFF ;
        box-shadow: none ;
        filter: brightness(0) invert(1) ;
        height: 20px ;
        opacity: .3 ;
        padding: 5px ;
        visibility: visible ;
        position: none ;
        bottom: 30px ;
        left: 30px ;
        z-index: 999 ;
    }
   #btnPrevious:hover,
   #btnNext:hover{ 
        opacity: 1 ;
        transition: all .3s ease-in-out ;
       
    }

＆＃13;

这就是我提出的代码，我为不透明度的变化感到骄傲，但我希望在悬停时颜色随着不透明度而变化。我希望你明白我的意思，但这就是我想要发生的事情。我尝试添加背景颜色：和颜色：在悬停选项卡下，但它们似乎无法正常工作我想我必须删除过滤器，但我不确定所以请帮我解决这个问题。

Answer 1

试试这个：

            <style>
             #btnNext {
                    border: 0px solid #FFF ;
                    box-shadow: none ;
                    height: 20px ;
                    opacity: .3 ;
                    padding: 0px ;
                    visibility: visible ;
                    position: none ;
                    bottom: 0px ;
                    right: 15px ;
                    z-index: 999 ;
                } 
                #btnPrevious {
                    border: 0px solid #FFF ;
                    box-shadow: none ;
                    filter: brightness(0) invert(1) ;
                    height: 20px ;
                    opacity: .3 ;
                    padding: 5px ;
                    visibility: visible ;
                    position: none ;
                    bottom: 30px ;
                    left: 30px ;
                    z-index: 999 ;
                }
               #btnPrevious:hover,
               #btnNext:hover{ 
                    opacity: 1 ;
                    transition: all .3s ease-in-out ;

                } 
                </style>
            <body>

            <button id="btnNext">Hello</button>

            </body>

Answer 2

您的过滤器属性filter: brightness(0) invert(1) !important;阻止在悬停时添加background-color。只需删除它并添加background-color: red;属性。

这里是我的jsfiddle - ＆gt; https://jsfiddle.net/vwmgnv8e/

希望它有所帮助：）

Answer 3

你好，你可以用这样的jquery做到这一点：

$("the name of the class").hover(function() {

$(this).css("background-color","red") });

如何在悬停时更改按钮的颜色？

3 个答案: