jQuery css() 函数更改“a”属性而不是“a:hover”属性答案

【问题标题】：jQuery css() function changing 'a' property not 'a:hover' propertyjQuery css() 函数更改“a”属性而不是“a:hover”属性
【发布时间】：2009-05-08 00:43:03
【问题描述】：

我目前在使用 jQuery css() 函数时遇到了一些问题。当悬停时，它改变了锚元素border-top-color 的css 值，而不仅仅是锚元素的border-top-color。下面是我的代码。

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

【问题讨论】：

不可能完全满足您的需求，请在此处查看更多详细信息：（jQuery Bug 跟踪器：访问：通过 JQUERY 访问元素的悬停 CSS 属性：bugs.jquery.com/ticket/4434） .因此，应改用其他答案中提供的解决方法。

标签： javascript jquery html css dynamic-css

【解决方案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');
});

【讨论】：

toggleClass('hover-highlight'); ;)

【解决方案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");

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

【讨论】：

同意。我通常使用添加/删除类方法，因为它将所有样式保存在一个地方。例如，您不必编辑 javascript 来更改悬停颜色。
更好，因为您正在最小化行为层中的表示数据。
#header 在那个选择器中也有点过分，恕我直言
@Chad 虽然 ID 在每个页面中应该是唯一的，但您可能有服务器端包含根据您所看到的网站部分将某些 ID 作为不同元素的子元素，所以链接 ID 可能确实有用。
谢谢大家的回答，我想我要创建一个新类并使用jQuery addClass 方法。谢谢大家。

【解决方案3】：

它不起作用的原因是:hover 位实际上并没有为选择器提供任何有关元素的信息。

CSS 中的a:hover 匹配与a 完全相同的元素，它只是为用户将鼠标悬停在这些元素上时定义了一组不同的属性。

jQuery 选择器旨在查找（选择）元素，而不是设置它们的样式。

css() 方法只是为所选元素设置内联样式，它不添加或更改任何实际的 CSS 声明。

正如其他人所提到的，您可以使用hover() 事件来获得相同的行为。不过，正如另一位回答者所描述的那样，动态添加一个类可能会更好。

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

【讨论】：

【解决方案4】：

此代码自 1.9 以来已损坏

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

改用这个

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

【讨论】：

这不起作用。 JavaScript 控制台说：unrecognized expression: unsupported pseudo: hover
自 jquery 1.9 起损坏

【解决方案5】：

将 !important 添加到悬停 css 以避免样式被覆盖。例如：

test:hover {
    border: 1.5px solid white !important;
    color: white !important;
}

【讨论】：