jQuery css()函数更改'a'属性而不是'a:hover'属性

Question

我目前在使用jQuery css()函数时遇到了一些麻烦.它正在改变锚元素的css值,border-top-color而不仅仅是border-top-color悬停时锚元素的css值.以下是我的代码.

$("#header #headerlist li a:hover").css("border-top-color","rgb(225, 149, 79)");

为什么它会改变#header #headerlist li aborder-top-color和#header #headerlist li a:hover属性而不仅仅是#header #headerlist li a:hover属性？

Answer 1

你的例子不起作用的原因是因为选择器无法检测:hover因为那是一个纯CSS的东西.相反,您可以尝试使用实际的jquery悬停方法:

$("#header #headerlist li a").hover(
  function () {
    $(this).css("border-top-color", "#FF0000");
  }, 
  function () {
    $(this).css("border-top-color", "#000000");
  }
);

或者,您也可以使用addclass方法:

$("#header #headerlist li a").hover(
  function () {
    $(this).addClass('hover-highlight');
  }, 
  function () {
    $(this).removeClass('hover-highlight');
  }
);

这可以进一步简化为:

$("#header #headerlist li a").hover(function () {
    $(this).toggleClass('hover-highlight');
});

Answer 2

我不确切知道为什么,但这种类型的更改在CSS中做得更好,所以我建议,如果你真的需要通过JS改变它,创建一个CSS类,然后在JS中更改它.

CSS

#header #headerlist li a.fancy-border:hover{
  border-top-color: rgb(225, 149, 79);
}

JS

$("#header #headerlist li a").addClass("fancy-border");

这样您就可以更好地将功能与演示分开.