JavaScript 如何禁用 CSS :hover 效果？-css教程-PHP中文网

JavaScript 如何禁用 CSS :hover 效果？

Barbara Streisand

发布： 2024-12-03 20:12:13

原创

293 人浏览过

How Can JavaScript Disable CSS :hover Effects?

使用 JavaScript 禁用 CSS :hover 效果

使用 JavaScript 实现更平滑的悬停效果，同时保留 CSS 样式可能是一个挑战。以下是如何克服它：

问题陈述：
当 JavaScript 可用时，防止浏览器对某些元素应用 CSS :hover 效果。

解决方案：
没有纯 JavaScript 机制来禁用 :hover 状态。但是，解决方法是使用类来控制 CSS 和 JavaScript 中的悬停效果。

HTML：
将“nojQuery”类添加到

中。

CSS:
限制 :hover 样式仅在

上存在“nojQuery”类时应用。

JavaScript:
当 JavaScript 加载时，从

中删除“nojQuery”类元素，有效禁用悬停样式。

示例：

<body class="nojQuery">

登录后复制

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

登录后复制

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

登录后复制

此方法允许您使用 JavaScript 覆盖 CSS 悬停效果，而无需使用 JavaScript必须显式重置每个单独的属性。

以上是JavaScript 如何禁用 CSS :hover 效果？的详细内容。更多信息请关注PHP中文网其他相关文章！