CSS 悬停与 JavaScript 鼠标悬停

IT技术 javascript css
2021-02-06 16:43:38

有时我需要选择使用 CSS element:hover 或 JavaScript onmouseover 来控制页面上 html 元素的外观。考虑以下 div 包装输入的场景

<div>
<input id="input">
</div>

当鼠标光标悬停在 div 上时，我希望输入更改背景颜色。CSS 方法是

<style>
  input {background-color:White;}
  div:hover input {background-color:Blue;}
</style>

<div><input></div>

JavaScript 方法是

<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
  <input id="input">
</div>

每种方法的优缺点是什么？CSS 方法是否适用于大多数 Web 浏览器？JavaScript 比 css 慢吗？

6个回答

:hover 的问题在于 IE6 仅在链接上支持它。这些天我将 jQuery 用于这种事情：

$("div input").hover(function() {
  $(this).addClass("blue");
}, function() {
  $(this).removeClass("blue");
});

使事情变得容易很多。这将适用于 IE6、FF、Chrome 和 Safari。

是的，IE7 对 CSS2 有 50% 的支持。许多网页设计师无法忍受的部分原因。
2021-03-21 16:43:38
我想知道 Metroui 是否允许用户禁用 javascript :p 但说真的，chromeos、mozilla 的 os、metroui 都使用 javascript。html5、css3、webgl 和 javascript 将在几年内成为创建客户端应用程序的语言。请耐心等待，很快就会在浏览器之外出现 javascript，然后不再需要在浏览器中禁用它 :)
2021-04-01 16:43:38
我做了一个快速测试...显然 IE7 不支持 div:hover??
2021-04-10 16:43:38
但是对于所有那些尽可能多地滥用沙箱的跟踪器、嗅探器和黑客来说，这是可以理解的。并不是说它有助于防止跟踪，而是人们试图让它变得更难是可以理解的。我知道有些人不允许使用 cookie。他们也有充分的理由，看看firesheep。我仍然赞成你的回答，因为如果人们会在 2013 年到达，意识到他们无论如何都会被跟踪并启用我（我们的？）最喜欢的玩具，我会很高兴。
2021-04-14 16:43:38

CSS 的可维护性和可读性要好得多。

人们应该更新这是最好的解决方案...我建议添加一个标签来检测浏览器并告诉他们如果使用 IE < 7 进行更新
2021-03-23 16:43:38
为什么 css 解决方案更易于维护和可读？
2021-03-30 16:43:38
它是可维护的，直到您必须在非 <a> 元素上支持 IE6。那么这很痛苦，因为您必须使用 JS-hack。但是 CSS 仍然是我的首选方式。让使用 1999 浏览器的人拥有 1999 体验。
2021-04-12 16:43:38

在 javascript 中执行此操作的另一个好处是您可以在不同的时间点添加/删除悬停效果 - 例如，悬停在表格行上会更改颜色，单击禁用悬停效果并开始在位置模式下编辑。

谢谢 - 这实际上回答了我正在寻找的问题！:-)
2021-04-02 16:43:38

为什么不同时？将 jQuery 用于动画效果和 CSS 作为后备。这为您提供了 jQuery优雅降级的好处。

CSS：

a {color: blue;}
a:hover {color: red;}

jQuery（使用jQueryUI为颜色设置动画）：

$('a').hover( 
  function() {
    $(this)
      .css('color','blue')
      .animate({'color': 'red'}, 400);
  },
  function() {
    $(this)
      .animate({'color': 'blue'}, 400);
  }
);

演示

jsbin 的一些更改使演示无法正常工作。我更新了演示以引用当前版本的 jQuery，并且一切都再次运行。
2021-03-23 16:43:38
对于 CSS 转换，我认为您应该只在 :Hover 应用于旧 IE 浏览器中的非锚标记时才使用 javascript 作为后备。
2021-04-02 16:43:38

两者之间还有另一个区别要记住。使用 CSS，当鼠标移离元素时，:hover状态始终处于停用状态。但是，对于 JavaScript，onmouseout当鼠标从元素移到浏览器 chrome 而不是页面的其余部分时，不会触发该事件。

这种情况发生的频率比您想象的要高，尤其是当您在页面顶部使用自定义悬停状态制作导航栏时。

其它你可能感兴趣的问题
上一篇如何使用Javascript比较两个数组是否相等？ 下一篇带有固定标题和固定列的 HTML 表格？