7

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

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

为什么它会更改#header #headerlist li a边框顶部颜色和#header #headerlist li a:hover属性而不仅仅是#header #headerlist li a:hover属性？

4

5 回答 5

20

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

$("#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');
});
于 2009-05-08T01:07:33.697 回答
12

我不知道为什么，但是这种类型的更改最好在 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");

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

于 2009-05-08T00:55:11.310 回答
1

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

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

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

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

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

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

于 2009-05-08T04:35:46.613 回答
0

此代码自 1.9 以来已损坏

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

改用这个

var class = '...';
if($(class+':hover').length>0){
  $(class).css('set','your styles here');
}
于 2013-09-10T20:35:25.813 回答
0

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

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

于 2016-05-10T03:42:29.907 回答