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

时间:2017-05-29 13:06:35

标签: css



 #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 ;
       
    } 




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

3 个答案:

答案 0 :(得分:0)

试试这个:

            <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>

答案 1 :(得分:0)

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

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

希望它有所帮助:)

答案 2 :(得分:-2)

你好,你可以用这样的jquery做到这一点:

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

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