当两者完成相同的工作时，是否更倾向于使用css而不是jquery？

我正在学习jquery的神奇之处，只是想看看这两种方法中是否有一种更受欢迎

示例1

<style type="text/css">span:hover {background: yellow;}</style>
<span>Hello!</span>

span:hover{background:yellow；}
你好

示例2

<style type="text/css">span.highlight{background:yellow;}</style>
<script type="text/javascript">
$("span").hover(function () {
    $(this).addClass("highlight");
    }, function () {
    $(this).removeClass("highlight");
});
<span>Hello!</span>

span.突出显示{背景：黄色；}
$（“span”）.hover（函数（）{
$（此）.addClass（“突出显示”）；
}，函数（）{
$（此）.removeClass（“突出显示”）；
});
你好

答案大致是这样的：“如果你能用CSS做，就用CSS做吧。”。CSS用更少的代码处理您正在做的事情，得到更好的支持，并且不需要像jQuery这样的库。

对于简单的悬停，最好只使用CSS，除非您想更改另一个元素的背景。

如果您要使用jQuery，它将加载整个jQuery库，这将减慢您的网站。如果你能用css来做，速度会快得多，你不必写5行，你可以写一两行。

答案是用css来做，因为

• CSS总是比javascript快
• 他们是使用禁用javascript的浏览器的用户

  ---

  >P>还有一点要考虑的是代码的可读性和可维护性。
  假设您已经有了大量用于效果的jQuery代码，而另一位开发人员希望更改一些与效果有关的内容，他可能会查看这些文件。现在排除悬停效果时，这不是一个一致的结构

  ---

  当然，一般来说，在CSS中这样做是更好的方法，但在某些情况下，更有逻辑地组织代码并将所有效果放在jQuery文件中是很有意义的。
  这里的每个人都很在行。jQuery必须先加载，然后才能完成其他任何花哨的工作。不过，通常情况下，缩小jQuery加载时间是非常不重要的。我不必为此担心
  然而，我发现像悬停这样简单的事情绝对没有理由使用jquery。在悬停函数中，乍一看使用jQuery似乎没什么用，但优点是，基本上你可以用一行简单的代码做很多事情，这是CSS永远做不到的，尤其是在大多数浏览器中
  例如：

  $("span").hover(function () {
      $(this).addClass("highlight");
      }, function () {
      $(this).removeClass("highlight");
  });
  

  如果只需要一个鼠标悬停，那么真的没有理由使用jQuery。在CSS中，你可以在鼠标悬停时指定任意数量的东西。。。但是你不能做一些非常流畅的动画。因此，让我们使用您的代码，让代码量基本保持不变，但考虑一下jQuery提供的可能性

  $("span").hover(function () {
        $(this).animate({width:'100px'}, 500); 
        $(".other-div").fadeIn(200);
      }, function () {
        $(this).animate({width:'50px'}, 500);
        $(".other-div").fadeOut(200); 
  });
  

  所以在这个例子中，我们不仅改变了宽度（你可以用纯CSS做这件事），而且现在我们在悬停的时候制作了动画。此外，我们正在淡出“其他部门”在同一时间！所以我们可以很容易地瞄准其他元素
  您可能希望在初始实例中使用jQuery的另一个原因是对元素进行更改，并在用户与它交互后保持更改。因此，它不再只是一个悬停，而是一个鼠标悬停事件，它会触发一些动作，但它会一直保持这种状态，直到用户做其他事情

  ---

  我认为最重要的是jQuery不是CSS的替代品，反之亦然。但它们确实应该一起使用。只要你能做一些简单的事情（比如悬停等），就使用CSS。但是当你想增加“魅力”时，可以使用jQuery将其提升到一个新的高度。
  谢谢，9分钟内的最佳答案，查看你的网站，你的“关于我们”部分非常有趣，同时也非常棒。好的，在2分钟内，你获得了5票，这是你获得的所有答案中最多的，谢谢：）。有时候你赢了，今天是我的日子。但这是规则，尝试将所有与表示相关的代码保存在CSS中。使用JS进行DOM操作等，并与Christian达成一致。一个具体的例子：CSS将在不支持javascript的浏览器上工作，并适用于关闭javascript的用户（如公司和高安全性用户）。您仍然可以使用CSS遍历树，例如：

  。parent:hover.child{color:red}

  。但是去旅行，不要认为没有js是可能的。你是对的。这是使用jQuery的另一个很好的理由。我真的希望他们能在下一代CSS中构建这一方面。这是一个多变量的问题！