通过 js 或 css 悬停？答案

【问题标题】：Hover through js or css?通过 js 或 css 悬停？
【发布时间】：2014-08-14 10:07:33
【问题描述】：

拥有div 元素，我可以通过Javascript 或CSS 设置其背景颜色。两者之间有什么区别，或者我们应该使用哪一个？

div:hover {background-color:gray;}

或

$( div).hover(function() {
  $( this ).css('background-color','gray');//user Jquery here

});

也有很多事情可以通过 JQ 和 CSS 来完成。我们如何选择使用哪一个？

【问题讨论】：

使用 CSS 总是更好。但是，如果您想使用 JS 进行修改，最好添加/删除类。
使用 CSS 也更好你不能通过 Javascript 改变或改变实际的 :hover 选择器。
CSS 应该是首选选项，而不是 JS。
好的，但是为什么更好呢？只是说它对我没有任何好处。
@GeorgeIrimiciuc 更好，因为 CSS 是为这类东西设计的。使用 JS/jQuery 版本的代码更多，这意味着运行 JS 引擎和 CSS 引擎。使用 CSS，它只是 CSS 引擎。回顾一下，JS 版本仍然需要 CSS 版本。但是，有时您会想要从 JS 修改样式（通常用于比简单悬停更复杂的交互），但是，使用 JS 只是为了更改 CSS 类，并根据这些 CSS 类添加样式。

标签： javascript jquery css hover jquery-hover

【解决方案1】：

您通常会使用 CSS，因为 CSS 是为这类东西设计的。使用 JS/jQuery 版本的代码更多，这意味着运行 JS 引擎和 CSS 引擎。使用 CSS，它只是 CSS 引擎。回顾一下，JS 版本仍然需要 CSS 版本。

不过，有时您会想从 JS 修改样式，但通常用于比简单悬停更复杂的交互。即便如此，您仍想使用 JS 来仅更改 CSS 类，并基于这些 CSS 类添加样式。

让我举几个简单的例子：

1。悬停时更改文本颜色

要更改的 CSS 属性：color。

你会在这里使用 CSS。在过去，这仅适用于锚元素，因此您可以在此处将 JS 用于 IE6 之类的浏览器。不过现在已经不是这种情况了，所以纯 CSS 解决方案就可以了。

2。在悬停时显示工具提示

要更改的 CSS 属性：display、top、left、right、bottom。

你很可能想在这里使用 JS。工具提示标记可能不是悬停元素的子元素，因此您无法在 CSS 中引用它。您可能会使用纯 CSS 解决方案，但这要求每个带有工具提示的元素都包含该工具提示的标记。很多多余的元素。

这里还需要 JS 来计算工具栏相对于元素和/或光标的确切位置。

请注意，这是一个示例，您不能将 CSS 类用于列出的属性。您将在 CSS 中设置工具提示的外观和感觉，但实际定位必须在 JS 中完成。

【讨论】：

【解决方案2】：

我将从我所知道的开始回答，但我相信很多其他人比我知道的多得多。

使用 CSS 而不是 JS 的原因之一是 CSS 允许在 移动设备上硬件加速。另一方面，Javascript 没有。这对于简单的background-color 更改来说并不那么重要，但是如果您正在对元素进行任何类型的转换和移动，它看起来会更平滑并且响应更快（例如，当 JS 被同步任务锁定时），动画仍然会运行）使用 CSS v jQuery/JS。（我正试图找到一个这样的例子，我记得大约一年前看过一个）。

在 JS 上使用 CSS 的另一个原因是，它将您的代码分成不同的部分，CSS 用于样式，而 Javascript 用于逻辑。同样，这是个人喜好，但这也是为什么许多框架比其他框架更受欢迎的原因。

另一方面，使用 JS 而不是 CSS 的一个原因是，如果您需要过滤列表并在几个元素上显示样式。在这种情况下，使用 Javascript 执行此操作是有意义的。纯粹主义者会争辩说，您应该使用 .addClass('myhoverclass') 而不是 .style(attr:val)，因为它可以让您使用上面列出的 CSS 的好处。

归根结底，这是一个偏好问题。如果您正在寻找原始速度，或者正在使用强烈的效果，请使用 CSS，因为它在移动设备上表现更好，也可以be forced to use hardware acceleration on a PC。另一方面，如果您更容易使用 Javascript 访问元素（例如过滤列表），请使用 Javascript。

您可以查看此link 了解更多信息。

【讨论】：

【解决方案3】：

嗯，这实际上是一个非常有趣的问题。我正在尝试考虑如何对这样的事情进行基准测试，尤其是因为大多数时候 CSS 或 JavaScript 都不会在网页上做真正计算密集型的事情。

我的直觉会说尽可能多地使用 CSS，但不要让它成为硬性规定。

a:hover {
  background-color: green;
}

在语义上更好

$('a').onmouseover(function() {
  $(this).css('background-color','green');
})

但是

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).css('background-color','green');
  }
})

在 CSS 中会很困难（尽管并非不可能）。你可以这样做。

$('a').onmouseover(function() {
  if (somethingelsehappened) {
    $(this).addClass('Green');
  }
})

a.green {
  background-color: green;
}

这确实是一种稍微尴尬的方式来完成可以直接在 JavaScript 中完成的事情，但我已经考虑了几分钟，即使在这里，正确的解决方案很可能是 CSS ，例如，如果您在悬停时设置了很多属性。

** 请注意，这些代码都不会正常工作，这些仅用于演示目的。**

参考：When a task can be accomplished by either Javascript or CSS, is it better to use CSS?

【讨论】：