jQuery设置另一个项目的css“颜色”元素覆盖了它的悬停伪类

Posted 2023-05-08

【中文标题】jQuery设置另一个项目的css“颜色”元素覆盖了它的悬停伪类

【英文标题】：jQuery setting the css "color" element of another item overrides its hover pseudoclass

【发布时间】：2020-12-07 07:34:07

【问题描述】：

我想让一个元素在悬停时突出显示，或者其他一些元素也悬停。然而，我为实现这一目标而编写的代码似乎会在运行时覆盖悬停伪类。我似乎不明白为什么——这个小提琴中的最小例子：https://jsfiddle.net/mLynfz3x/

一旦第二个元素被悬停，第一个元素的悬停伪类就被删除了，我不知道为什么。 jQuery .css() 函数是否打算覆盖伪类？还是我完全错过的其他问题

谢谢！

【问题讨论】：

伪元素不是DOM 的一部分，因此不能使用jQuery 或javascript 更改或返回到原始状态。只要您将鼠标悬停在它们上面，.css 就会完全控制该元素。

@AlwaysHelping 这正是我对 jQuery/js 代码如何以某种方式删除或禁用我的伪元素感到困惑的原因

正确！ .css 将取出元素，并且不会监听为该元素定义的伪元素。

我要在此处添加的替代方法（也请参见下面的答案）会在您的 CSS 中添加 !important - 但我个人不喜欢添加 !important 除非非常必要。跨度>

我非常同意@AlwaysHelping 的观点，因为它覆盖了现有的 CSS，这不是很“干净”。我通常创建一个具有所需效果的类，如果我想用 JQuery 实现 css 更改，我使用 .addClass() 和 .removeClass() 或 .toggleClass() 来更改应用的 css 而不会获得冗余代码

【参考方案1】：

元素测试链接的设置颜色不会禁用悬停伪类，该元素的固定颜色只是，可以说“更高优先级”。所以你所要做的就是添加：

#testLink:hover 
  color: olive !important;

它应该适用于您现有的 JQuery。

【讨论】：

这是由于 .css() 将 INLINE-Style 添加到您的元素，并且比样式表具有更高的优先级，如果这可以解释您的问题

【参考方案2】：

这就是我所做的

$("#aTestItem").hover(() => 
  $("#testLink").css("color", "olive");
, () => 
  $("#testLink").css("color", "black");
);

$("#testLink").hover(() => 
  $("#testLink").css("color", "olive");
, () => 
  $("#testLink").css("color", "black");
);