Question

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

div:hover {background-color:gray;}

或

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

});

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

Answer 1

我首先回答我所知道的事情，但我相信很多其他人比我知道的更多。

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

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

另一方面，如果您需要过滤列表并在几个元素上显示样式，那么在CSS上使用JS的原因就是如此。在这种情况下，使用Javascript执行此操作是有意义的。纯粹主义者认为你应该使用.addClass('myhoverclass')代替.style(attr:val)，因为它允许你使用上面列出的CSS的好处。

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

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

Answer 2

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

我的直觉是尽可能地使用CSS，但不要将其变成一个严格的规则。

a:hover {
  background-color: green;
}

在语义上更好

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

BUT

$('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?

Answer 3

你通常使用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来计算toolip相对于元素和/或光标的确切位置。

请注意，这是一个示例，您无法为列出的属性使用CSS类。你会看起来和外观风格感觉CSS中的工具提示，但实际定位必须在JS中完成。

将鼠标悬停在js或css上？

3 个答案:

1。在悬停时更改文字颜色

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