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

尝试使用Google搜索更多...“使用jquery应用悬停效果” - ＆gt;

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

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

至于你问题的其他部分，上面的答案几乎涵盖了它。

Answer 7

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

Answer 8

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

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

8 个答案: