Question

我无法更改按钮的背景。

HTML：

<div class="direct-link-box-container">
    <form class="direct-box-form">
    <input type="text" class="direct-link-box" placeholder="Paste your Torrent Link or Magnet">
    <input type="submit" class="get-button" value="Get">
    </form>
</div>

CSS：

direct-link-box-container .get-button
    {
        background-color: #BDBDBD;
        border: none;
        border-radius: 1px;
        height: 40px;
        width: 50px;
        color: #FFFFFF;
        transition: background-color 0.2s ease;
    }
    .get-button-hover
    {
        background-color: blue;
    }

JS：

$(document).ready(function () {
        $('.get-button').hover(function () {
            $(this).addClass('get-button-hover');
        },
        function () {
            $(this).removeClass('get-button-hover');
         }
        );
    });

Answer 1

我假设应该是您的CSS代码段中的领先.

.direct-link-box-container .get-button {
    background-color: #BDBDBD; 
    border: none; 
    border-radius: 1px; 
    height: 40px; 
    width: 50px; 
    color: #FFFFFF; 
    transition: background-color 0.2s ease;
} 
.direct-link-box-container .get-button-hover{
^^^^^^^^^^^^^^^^^^^^^^^^^^ see specificity link below
    background-color: blue;
}

参见CSS特异性https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

为什么我的按钮的背景没有改变？

1 个答案: