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

Question

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

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

image {
background-image:url ..
}

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

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

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

提前致谢

Answer 1

一个简单的答案，无论你使用CSS而不是脚本做什么，都可以做到。

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

Answer 2

其他人可以评论jQuery，但是出于各种目的，如果你能用CSS实现你想要的效果，那就坚持下去吧。 在后台启动的脚本越少越好。

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

将两个图像堆叠成一个JPG / Gif。 如果它是50x100px，

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

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

Answer 3

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

一般来说，如果您可以在css中完成，并且您确定需要支持的所有浏览器，可以使用您的解决方案，那么请使用js的样式解决方案

Answer 4

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

有一点需要注意的是，如果你对移动用户感到困扰，那么悬停效果基本上会为尝试到达某个地方的用户添加另一个点击。 第一次单击将初始化悬停状态，下一次单击将引导用户访问该URL。 然而，使用jQuery这不会是一个问题，但是，如果用户在浏览器中关闭了Javascript，那将是一个问题，因此需要考虑回退。

所以它只取决于你想采取哪种方法。

Answer 5

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

Answer 6

尝试谷歌搜索更多...“使用jquery应用于悬停影响” - >

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

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

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

Answer 7

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

Answer 8

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