jQuery css（）函数更改'a'属性而不是'a：hover'属性 [英] jQuery css() function changing 'a' property not 'a:hover' property

问题描述

我现在对jQuery css（）有一点麻烦。它正在改变锚元素的 border-top-color 的css值，而不仅仅是锚元素的 border-top-color 当悬停时。下面是我的代码。

I'm having a bit of trouble with the jQuery css() function at the moment. It is changing the css value of the anchor element's border-top-color instead of just the anchor element's border-top-color when hovered. Below is my code.

$("#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

Why does it change the #header #headerlist li a border-top-color and the #header #headerlist li a:hover properties rather than just the #header #headerlist li a:hover property?

推荐答案

您的示例不起作用的原因是因为选择器没有办法检测：悬停，因为那是一个纯CSS的东西。相反，您可以尝试使用实际的 jquery hover方法：

The reason your example doesn't work is because the selector has no way of detecting :hover since that's a pure CSS thing. Instead you might try using the actual jquery hover method:

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

或者，也可以使用addclass方法：

Alternatively, you could also use the addclass method as well:

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

这篇关于jQuery css（）函数更改'a'属性而不是'a：hover'属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！