3

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

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

image {
background-image:url ..
}

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

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

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

提前致谢

4

8 回答 8

2

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

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

于 2013-11-04T21:46:59.687 回答
2

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

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

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

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

image:hover {
   background:url('/images/img.jpg') no-repeat 0 -50px;
}
于 2013-11-04T21:48:03.527 回答
1

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)' })
});
于 2013-11-04T21:53:19.590 回答
1

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

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

于 2013-11-04T21:49:26.973 回答
1

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

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

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

于 2013-11-04T21:49:28.633 回答
0

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

于 2013-11-05T06:50:53.153 回答
0

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

于 2013-11-04T22:00:13.703 回答
0

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

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

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

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

于 2013-11-04T21:49:30.387 回答