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

What is the difference between using CSS or Jquery in this case

本文关键字：Jquery 什么 区别 CSS 这种情况下 使用      更新时间：2023-09-26

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

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

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

悬停时只需更改图像，而我相信 jQuery 代码会长一点

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

提前致谢

一个简单的

答案，当你可以使用CSS而不是脚本做某事时，去做吧。

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

其他人可以对jQuery发表评论，但出于所有目的，如果你可以用CSS达到你想要的效果，那就坚持下去。在后台触发的脚本越少越好。

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

将两个图像堆叠成一个 JPG/GIF。如果是 50x100 像素，

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

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

一般来说，如果你可以在css中做到这一点，并且你确定你需要支持的所有浏览器都可以使用你的解决方案，然后通过js选择样式解决方案

使用 jQuery，

您可以使用 mouseenter() 和 mouseleave() 函数来添加类并相应地删除类，从而为您提供悬停效果，但这需要比 CSS 更多的代码，因为您需要 jQuery 代码，加上 CSS 样式来配合您添加的类。

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

因此，这仅取决于您要采取哪种方法。

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)' })
});

尝试在谷歌上搜索更多..."使用 jQuery 应用于悬停影响" ->

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

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

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

你可以在这里阅读使用 CSS3 与 JQuery 的好处，在这里输入链接描述。但这并不意味着你不能使用JQuery。

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

相关文章：