我可以通过JavaScript禁用CSS：hover效果吗？

一尘不染

我可以通过JavaScript禁用CSS：hover效果吗？

css

我试图阻止浏览器:hover通过JavaScript 使用CSS 的效果。

我在CSS中设置了a和a:hover样式，因为如果JS不可用，我希望获得悬浮效果。但是，如果有可用的JS
，我想用更平滑的效果覆盖CSS悬停效果（例如，使用jQuery color插件）。

我尝试了这个：

$("ul#mainFilter a").hover(
     function(e){ e.preventDefault(); ...do my stuff... }, 
     function(e){ e.preventDefault(); ...do my stuff... });

我也尝试过使用return false;，但是它不起作用。

如fudgey所述，一种解决方法是使用重置悬浮样式，.css()但我必须覆盖CSS中指定的每个属性。我正在寻找一个通用的解决方案。

有谁知道如何做到这一点？

PS：我不想覆盖为悬停设置的所有样式。

阅读 1198

2020-05-16

共1个答案

一尘不染

恐怕没有纯粹的JavaScript通用解决方案。JavaScript无法关闭CSS :hover状态本身。

您可以尝试以下替代解决方法。如果您不介意在HTML和CSS中多花钱，那么您不必通过JavaScript手动重置每个CSS属性。

的HTML

<body class="nojQuery">

CSS

/* Limit the hover styles in your CSS so that they only apply when the nojQuery 
class is present */

body.nojQuery ul#mainFilter a:hover {
    /* CSS-only hover styles go here */
}

JavaScript

// When jQuery kicks in, remove the nojQuery class from the <body> element, thus
// making the CSS hover styles disappear.

$(function(){}
    $('body').removeClass('nojQuery');
)

2020-05-16