Javascript jQuery css（）函数正在更改'；a'；不动产'；a:悬停'；财产

目前，jQuery

css（）

函数有点问题。当鼠标悬停时，它正在更改锚元素的

边框顶部颜色

的css值，而不仅仅是锚元素的

边框顶部颜色

。下面是我的代码

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

---

为什么它会更改

#header#headerlist li a

边框顶部颜色和

#header#headerlist li a:hover

属性而不仅仅是

#headerlist li a:hover

属性？

我不知道确切原因，但这种更改最好在CSS中完成，所以我建议，如果你真的需要通过JS来改变这一点，创建一个CSS类，然后在JS中改变它

CSS JS

---

这样，您可以更好地将功能与表示分离。

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

或者，您也可以使用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');
});

---

它不起作用的原因是

：hover

位实际上没有向选择器提供任何有关元素的信息

a:hover

在CSS中，它与

a

在相同的元素上匹配，它只是为用户悬停在这些元素上时定义了一组不同的属性

jQuery选择器设计用于查找（选择）元素，而不是设置它们的样式

css（）

方法只是在所选元素上设置一个内联样式，它不会添加或更改任何实际的css声明

正如其他人提到的，您可以使用

hover（）

事件来获得相同的行为。不过，正如另一位回答者所描述的，动态添加类可能更好

---

但是，如果您不需要动态更改，我建议您使用普通的旧CSS，因为它速度更快，并且不需要用户启用javascript。

此代码自1.9版以来已被破坏

if($('...').is(':hover')){
  $(this).css('set','your styles here')
}

用这个代替

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}

---

加上！对于悬停css很重要，以避免样式被覆盖。 例如：

测试：悬停{
边框：1.5px纯白！重要；
颜色：白色！重要；
}

同意。我通常使用添加/删除类的方法，因为它将所有样式保存在一个地方。例如，您不必编辑javascript来更改悬停颜色。更好的是，您可以最小化行为层中的表示数据。#该选择器中的标题也有点过多，imho@Chad虽然每个页面上的ID都应该是唯一的，您可能有服务器端包含，根据您看到的站点的不同部分，将某些ID作为不同元素的子元素，因此链接ID可能确实有用。感谢大家的回答，我想我将创建一个新类并使用jQuery addClass方法。谢谢大家。toggleClass（'hover-highlight'）；）确切地说，您要查找的内容是不可能的，请在这里查看更多详细信息：（jQuery Bug tracker:ACCESS:HOVER-CSS-PROPERTIES-OF-a-ELEMENT-VIA-jQuery:bugs.jQuery.com/ticket/4434）。因此，应该使用其他答案中提供的变通方法。这不起作用。JavaScript控制台显示：

无法识别的表达式：不支持的伪：hover

自jquery 1.9以来已损坏

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

if($('...').is(':hover')){
  $(this).css('set','your styles here')
}

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}