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

IT技术 javascript jquery css
2021-01-17 02:52:31

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

我已经在我的 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：我不想覆盖我为悬停设置的所有样式。

6个回答

恐怕没有纯 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');
)
“与 noscript 解决方案相比，我更喜欢这个解决方案，因为当 CSS 完全包含在外部文件中时，这有效”——<noscript>解决方案也是如此。您只需将<link>标签放在<noscript>, 而不是<style>标签中。我的解决方案确实允许您将所有内容保存在一个样式表文件中，而不是多个文件中。
2021-03-16 02:52:31
这不完全是我想要的，但我认为这个解决方案是最好的妥协！谢谢大家
2021-03-16 02:52:31
@先生。Shiny and New：我同意，我也比我的解决方案更喜欢这个！我不知道为什么我之前没有注意到这个优雅......
2021-03-23 02:52:31
您还可以使用不同的名称复制相同的样式，并使用 jquery 选择具有该类的所有元素并删除该类并替换为复制类。
2021-03-23 02:52:31
我比 noscript 解决方案更喜欢这个解决方案，因为这在 CSS 完全包含在外部文件中时有效，并且在页面加载期间也有效，如果 CSS 先加载但 JS 直到稍后加载。如果在加载完成之前单击内容，则使用 jQuery 来“逐步增强”内容通常会导致页面无法正常工作。即使在快速链接上使用快速浏览器，我也经常看到这种情况。
2021-03-26 02:52:31

使用仅分配了悬停的第二个类：

HTML

 <a class="myclass myclass_hover" href="#">My anchor</a>

CSS

 .myclass { 
   /* all anchor styles */
 }
 .myclass_hover:hover {
   /* example color */
   color:#00A;
 }

现在您可以使用 Jquery 删除类，例如，如果元素已被单击：

查询

 $('.myclass').click( function(e) {
    e.preventDefault();
    $(this).removeClass('myclass_hover');
 });

希望这个回答有帮助。

加1.它不是正统的，但以一种非常崇高的方式破解了问题。
2021-03-19 02:52:31

您可以使用 javascript 操作样式表和样式表规则本身

var sheetCount = document.styleSheets.length;
var lastSheet = document.styleSheets[sheetCount-1];
var ruleCount;
if (lastSheet.cssRules) { // Firefox uses 'cssRules'
    ruleCount = lastSheet.cssRules.length;
}
else if (lastSheet.rules) { / /IE uses 'rules'
    ruleCount = lastSheet.rules.length;
}
var newRule = "a:hover { text-decoration: none !important; color: #000 !important; }";
// insert as the last rule in the last sheet so it
// overrides (not overwrites) previous definitions
lastSheet.insertRule(newRule, ruleCount);

使属性 !important 并使其成为最后一个 CSS 定义应该覆盖任何以前的定义，除非一个更明确的目标。在这种情况下，您可能需要插入更多规则。

2021-03-19 02:52:31
或者把你的 noscript 样式表<link>标签放在一个<noscript>元素中？那行得通，对吧？
2021-03-19 02:52:31
即使是 IE5 也能做到。它的方法被称为不同，但它应该可以工作：msdn.microsoft.com/en-us/library/ms531195%28v=vs.85%29.aspx。我没有检查其他浏览器，但我猜所有现代浏览器都实现了该标准。
2021-03-21 02:52:31
或者您可以将所有 noscript 规则放在一个样式表中，然后从 javascript 中禁用该样式表。
2021-03-27 02:52:31
在 Firefox 中，我得到 Error: The operation is insecure.
2021-03-31 02:52:31

这类似于 aSeptik 的答案，但是这种方法呢？将要禁用的 CSS 代码包装在<noscript>标签中使用 JavaScript 。这样，如果 javaScript 关闭，:hover将使用CSS ，否则将使用 JavaScript 效果。

例子：

<noscript>
<style type="text/css">
ul#mainFilter a:hover {
  /* some CSS attributes here */
}
</style>
</noscript>
<script type="text/javascript">
$("ul#mainFilter a").hover(
     function(o){ /* ...do your stuff... */ }, 
     function(o){ /* ...do your stuff... */ });
</script>

我使用了not()CSS 运算符和 jQuery 的addClass()函数。这是一个示例，当您单击列表项时，它不会再悬停：

例如：

HTML

<ul class="vegies">
    <li>Onion</li>
    <li>Potato</li>
    <li>Lettuce</li>
<ul>

CSS

.vegies li:not(.no-hover):hover { color: blue; }

jQuery

$('.vegies li').click( function(){
    $(this).addClass('no-hover');
});
其它你可能感兴趣的问题
上一篇使用 jQuery 在特定时间间隔显示和隐藏 div 下一篇如何使用 document.querySelectorAll 循环选择元素