我试图阻止浏览器通过JavaScript使用CSS的 :hover
效果 .
我在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... });
我也尝试了 return false;
,但它不起作用 .
这是我的问题的一个例子:http://jsfiddle.net/4rEzz/ . 链接应该褪色而不会变灰 .
正如fudgey所提到的,解决方法是使用 .css()
重置悬停样式,但我必须覆盖CSS中指定的每个属性(请参阅此处:http://jsfiddle.net/raPeX/1/) . 我正在寻找通用的解决方案 .
有谁知道如何做到这一点?
PS: I do not want to overwrite every style i have set for the hover.
9 回答
这与aSeptik的答案类似,但这种方法呢?在
<noscript>
标签中使用JavaScript包装要禁用的CSS代码 . 这样,如果javaScript关闭,将使用CSS:hover
,否则将使用JavaScript效果 .例:
我担心没有纯粹的JavaScript通用解决方案 . JavaScript无法关闭CSS
:hover
状态本身 .您可以尝试以下替代解决方法 . 如果你不介意在你的HTML和CSS中稍微乱搞,它可以节省你必须通过JavaScript手动重置每个CSS属性 .
HTML
CSS
JavaScript
只是一个较短的答案......
使用仅分配了悬停的第二个类:
HTML
CSS
现在您可以使用Jquery删除该类,例如,如果已单击该元素:
JQUERY
希望这个答案很有帮助 .
您可以使用javascript操纵样式表和样式表规则
使属性!重要并使其成为最后一个CSS定义应覆盖任何先前的定义,除非更具体地定位 . 在这种情况下,您可能必须插入更多规则 .
我会使用CSS来防止:hover事件改变链接的外观 .
这个简单的CSS意味着链接将始终为黑色而不加下划线 . 我无法从问题中看出外观的变化是否是您想要控制的唯一内容 .
我使用了
not()
CSS运算符和jQuery的addClass()
函数 . 下面是一个示例,当您单击列表项时,它将不再悬停:例如:
HTML
CSS
jQuery的
当您检测到设备支持触摸时,我建议将所有
:hover
属性替换为:active
. 只需在touch()
时调用此函数 .尝试设置链接颜色:
编辑:或者更好,使用CSS,正如克里斯托弗建议的那样
实际上另一种解决方法可能是用insertRule覆盖CSS .
它提供了将CSS规则注入现有/新样式表的功能 . 在我的具体例子中,它看起来像这样:
用我4岁的原始示例进行演示:http://jsfiddle.net/raPeX/21/