我可以通过JavaScript禁用CSS:hover效果吗?

我试图阻止浏览器使用CSS悬浮效果,通过JavaScript。

我已经在我的CSS中设置了a和a:hover样式,因为我想要一个悬停效果,如果JS不可用。但是如果JS可用,我想覆盖我的CSS悬停效果与更平滑的(使用jQuery颜色插件例如。)

我试过这个:

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

我也试过它返回false,但它不工作。

这里是我的问题的一个例子:http://jsfiddle.net/4rEzz/.链接应该淡化,而不会变灰。

正如fudgey所提到的,一个解决方法是使用.css()重置悬停样式,但是我必须覆盖CSS中指定的每个属性(参见这里:http://jsfiddle.net/raPeX/1/)。我在寻找一个通用的解决方案。

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

PS:我不想覆盖我为悬停设置的每种风格。

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

您可以尝试以下替代解决方法。如果你不介意在你的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');
)
http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:我可以通过JavaScript禁用CSS:hover效果吗?