在这种情况下使用 CSS 或 Jquery 有什么区别答案

【问题标题】：What is the difference between using CSS or Jquery in this case在这种情况下使用 CSS 或 Jquery 有什么区别
【发布时间】：2013-11-15 15:53:41
【问题描述】：

我现在正在创建一个菜单栏，它使用 Photoshop 设计的 2 张图像，一张是正常的，一张是悬停效果的。

我已经看到我可以同时使用 css 和 JQuery 来创建悬停效果，我发现 CSS 更容易使用例如：

image {
background-image:url ..
}

image:hover {
background-image:url ...}

悬停时只需更改图像，而我相信 jquery 代码有点长

如果你们中的任何人能告诉我在这种情况下使用 CSS 和 JQuery 之间的区别，以及我在上面使用 CSS 所做的相同事情的 JQuery 代码是什么。

提前致谢

【问题讨论】：

CSS 不需要启用 JavaScript 或整个库即可工作。此外，用户很少（如果有的话）关闭 CSS。
如果您只想在悬停时更改图像，那么您想使用 CSS。 jQuery 允许您在悬停时运行任意代码，例如发出 ajax 请求和修改 dom 结构。它当然不适用于这个特定的用例。
一般经验法则...首先考虑使用 css 规则。在元素上切换类非常简单。添加内联 css 也很容易......但如果代码中有重叠的内联样式源，有时撤消它可能会很棘手
好吧，所以我最好使用 CSS，不是吗？
@PHP CSS 可能更好，除非您需要支持不支持图像悬停的旧浏览器，例如 IE6。顺便说一句，您当然是指 img 而不是 image。

标签： javascript php jquery html css

【解决方案1】：

如果你只是想改变图像，CSS 是最好的方法。它不仅在实现上而且在运行网站时都比使用 jQuery 更快、更简单。但是，如果您在更改图像时想要一点效果（如淡入淡出或移动效果...），那么 jQuery 必须是您的选择。

【讨论】：

【解决方案2】：

您可以在enter link description here 阅读使用 CSS3 与 JQuery 的优势。但这并不意味着您不能使用 JQuery。

【讨论】：

【解决方案3】：

CSS 更快，因为它的机器代码步骤更少。 Javascript，这就是 jQuery 的全部，必须通过像 Chromes V8 这样的引擎。因此它比 CSS 慢得多。您不应该浪费时间在浏览器中已经内置的 javascript 中重写逻辑，就像 CSS :hover 伪选择器的情况一样。

待办事项

image {
  background-image: url(image1.jpg);
}

image:hover {
  background-image: url(image2.jpg);
}

在 jQuery 中是：

$(image).on( 'mouseenter', function(){
  $(this).css({ background-image : 'url(image2.png)' })
}).on( 'mouseleave', function(){
  $(this).css({ background-image : 'url(image1.png)' })
});

【讨论】：

非常感谢您的回答！
欢迎，提醒一下，不要忘记选择一个正确的答案（不一定是这个），点击赞成/反对票下方的复选标记。保重。

【解决方案4】：

尝试谷歌搜索更多...“使用 jquery 应用悬停效果”->

  $("p").hover(function(){
    $("p").css("background-image","url ..");
    },function(){
    $("p").css("background-image","url ......");
  });

来源：http://www.w3schools.com/jquery/event_hover.asp

至于你问题的另一部分，上面的回答几乎涵盖了它。

【讨论】：

【解决方案5】：

使用 jQuery，您可以使用 mouseenter() 和 mouseleave() 函数相应地添加和删除类，从而为您提供悬停效果，但这需要更多的代码，而不仅仅是 CSS，因为您需要jQuery 代码，以及与您要添加的类一起使用的 CSS 样式。

如果您对移动用户感到困扰，请记住一件事，即悬停效果基本上会为试图到达某个地方的用户添加另一次点击。第一次单击将初始化悬停状态，下一次单击会将用户定向到 url。虽然使用 jQuery 这不是问题，但是，如果用户在他们的浏览器中关闭了 Javascript，这将是一个问题，因此需要考虑回退。

所以这取决于你想采用哪种方法。

【讨论】：

【解决方案6】：

这取决于 css。如果您需要支持某些东西，旧浏览器将不会支持它们。如果可能的话，你几乎应该总是用 css 而不是 js 来做，当然要注意。有时它在 css 中要复杂得多。其他时候浏览器可能无法实现你需要的东西，（比如动画）

一般来说，如果你可以在 css 中做到这一点，并且你确定你需要支持的所有浏览器都可以使用你的解决方案，那么就去 js 上的样式解决方案

【讨论】：

【解决方案7】：

其他人可以评论 jQuery，但出于所有目的，如果您可以使用 CSS 实现您想要的效果，请坚持下去。在后台触发的脚本越少越好。

请注意，我会为您的图像使用精灵并更改悬停时的背景位置，这样您就不会在浏览器加载悬停图像时快速闪烁。

将两张图片堆叠成一张 JPG/Gif。如果是 50x100px，

image {
   background:url('/images/img.jpg') no-repeat;
}

image:hover {
   background:url('/images/img.jpg') no-repeat 0 -50px;
}

【讨论】：

【解决方案8】：

一个简单的答案，只要你可以使用 CSS 而不是脚本来做某事，就去做吧。

这也使以后的代码编辑变得更加容易，因为您知道悬停应用的位置，但是使用脚本，您可能会发现很难跟踪事件处理程序，尤其是使用不提及名称的复杂选择器应用它们时您正在尝试编辑的元素。

【讨论】：

好的，我明白了，所以我最好尽可能使用 CSS 而不是 javascript :) 谢谢你的回答 :)
在使用 CSS 或 jQuery 时，您需要考虑一件事，即浏览器支持。 IE8 及更低版本将不支持 CSS3 中出现的一些新功能，例如渐变、动画、淡入/淡出。如果这是您自己关心的主要问题，那么这将是唯一一次在 css 上使用脚本。