Question

因此它会更改背景图像，但不会更改背景颜色。无论如何要注意在我的代码中指出问题？

JavaScript的：

$("#menu a").hover(function() {
    $(this).addClass("hover");
}, function() {
    $(this).removeClass("hover");
});

CSS：

.hover {
    background-color: white;
    background-position: top center;
    background-image: url("img/dot.png");
    background-repeat: no-repeat;
    color: red;
}

Answer 1

在黑暗中拍摄：

在将事件绑定到DOM之前，您需要确保DOM中存在节点。如果您在<script>中呼叫<head>，请等待document.ready：

jQuery(function($){
    $("#menu a").hover(function() {
        $(this).addClass("hover");
    }, function() {
        $(this).removeClass("hover");
    });
});

或者，您可以使用其他位置higher specificity的选择器覆盖background-color属性。如果您定义了a:link，a:visited，a:hover，a:focus或a:active等样式，则需要更高的特异性选择器来覆盖它：< / p>

a.hover {
  /* your styles here */
}

您需要为我们提供更多CSS，以便为您提供更好的建议。

您可能拼错了ID或未将a元素嵌套在[id="menu"]的其他元素下。

Answer 2

如上所述......如果您只是添加以下css，它将会处理它。

a:hover {
    background-color: white;
    background-position: top center;
    background-image: url("img/dot.png");
    background-repeat: no-repeat;
    color: red;
}

：hover是一个伪css类，你可以在任何东西上使用它，而不需要添加jquery / js来支持它。

Answer 3

根据ShankarSangoli的评论，你的css中可能有另一条规则覆盖了背景颜色，这反过来又可能是specificity的问题。

您可以稍微更改hover功能来测试：

$("#menu a").hover(
    function () {
        //add 'background-color' as an inline css style which will have higher specificity than anything in the css.
        $(this).addClass("hover").css('background-color', 'white');
    }, function () {
        $(this).removeClass("hover").css('background-color', '');
    }
);

Answer 4

你的问题是有些东西会覆盖你的背景颜色。使用firebug或其他DOM检查器来查找问题。修复程序是使您的背景颜色很重要，但您应该只使用它来进行测试：

background-color: black !important;

如果这样可行，您仍然需要找出覆盖背景的内容。

然后你可以用纯CSS

来做到这一点

#menu a:hover {
    background-color: black;
    background-position: top center;
    background-image: url("img/dot_hover.png");
    background-repeat: no-repeat;
    color: red;
}

背景颜色不变？

4 个答案: