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

Question

我现在在使用 jQuery css() 函数时遇到了一些麻烦。它正在更改 anchor 元素的 border-top-color 的 css 值，而不仅仅是悬停时 anchor 元素的 border-top-color 。下面是我的代码。

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

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

Answer 1

您的示例不起作用的原因是因为选择器无法检测 :hover 因为那是纯 CSS 的东西。相反，您可以尝试使用实际的 jquery hover method :

$("#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');
});