5

我希望我的主要标志在鼠标悬停时改变。

我知道有几种方法可以实现这一点，并且想知道稳定性、浏览器兼容性、效率和易于设置的最佳方法是什么。

我发现的一些方法是：

  • Javascript (jQuery) 替换“src”属性。
  • CSS 使用背景和“悬停”

还有吗？什么是最好的？

4

8 回答 8

10

底线

对于内容丰富的图像，您希望src在 HTML 标记中包含 。您想使用 Javascript 解决方案并将翻转图像放入属性中。

对于无内容的图像 UI 元素，尤其是在整个站点中常见或重复的元素，直接的 CSS 解决方案将是最好的（因此您不必在每次调用时重新声明图像位置）。在 CSS 解决方案中，精灵是最好的，因为它们不需要预加载开销。

Javascript 解决方案

HTML：

<img src="/img/one.jpg" data-rollover="/img/two.jpg" />

在 jQuery 中：

$(function(){
  $('img.rollover').hover(function(){
    var e = $(this);
    e.data('originalSrc', e.attr('src'));
    e.attr('src', e.attr('data-rollover'));
  }, function(){
    var e = $(this);
    e.attr('src', e.data('originalSrc'));
  }); /* a preloader could easily go here too */
});

示例实现：http: //jsfiddle.net/dtPRM/1/

好处：很容易；这说得通; 一旦您设置了库，它就可以使用最少的附加标记。

缺点：需要 Javascript 和加载 jQuery 库的开销。

可能是最好的选择。如果您的用户正在使用与翻转相关的浏览器（可能是这种情况），则他们具有运行此选项的 Javascript 功能。出于某种原因有意关闭 Javascript 的人会发现，如果您留下一个小<noscript>便条，说明他们可能无法获得完整的功能集。

CSS 解决方案：最佳

HTML：

<div id="img1" />

CSS：

div#img1 {
  height: 400px;
  width: 300px;
  background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
  background-position: top right;}

示例实现：http: //jsfiddle.net/dtPRM/5/

就个人而言，我认为对于内容丰富的图像，这是比 CSS + 两个背景图像解决方案更糟糕的选择。您将 HTML 标记与显示的语义值分开。

但是，如果您使用的是 UI 元素等无内容图像，我认为这是最好的解决方案。

CSS 解决方案：也可以

另一个不涉及背景图像的 CSS 选项是可用的（如果您想在 HTML 中包含图像标签，则在 CSS 解决方案中首选，例如语义上有意义的图像）。

<div class="rollover">
  <img class="rollover" src="http://dummyimage.com/600x400/000/fff" />
  <img class="" src="http://dummyimage.com/600x400/fff/000" />
</div>

CSS（我在:not这里使用伪选择器，但很容易避免使用它；我也认为我在语义上得到了类名）：

div.rollover img:not(.rollover) {display: none;}
div.rollover:hover img:not(.rollover) {display: inline;}
div.rollover:hover img.rollover {display: none;}

示例实现：http: //jsfiddle.net/dtPRM/2/

优点：与之前将所有信息放在样式表中的 CSS 解决方案相比，在语义上是明智的。

缺点：需要额外的标记。

评论：这个可能会根据浏览器是否需要自动预加载。

底线：如果选项 (1) 不可用，这是一个不错的后备方案，因为您绝对需要 IE2 兼容性或非 JS 支持。

CSS 解决方案：远离

我之所以提到这一点，只是因为您在问题中提到了它。我不会用它。

HTML：

<div id="img1" />

CSS：

div#img1 {
  height: 400px;
  width: 600px;
  background: url('http://dummyimage.com/600x400/000/fff') no-repeat top left;}
div#img1:hover {
  background-image: url('http://dummyimage.com/600x400/fff/000');}

示例实现：http: //jsfiddle.net/dtPRM/4/

优点：广泛兼容；您真正需要支持的只是背景图像和悬停。

缺点：将图像放在 CSS 中并在那里集中在语义上很奇怪。使未来的修改更加困难。话虽如此，如果您有一个需要翻转图像的场景，那么它很有可能是非内容图像（例如，UI 元素），在这种情况下，CSS 在语义上（可能）甚至比常规图像。请参阅下面关于精灵的注释。

其他缺点：您必须小心声明图像的高度和宽度（无论如何这是一个很好的做法，但当您只想完成任务时可能会变得很麻烦）。在移动浏览器上查看的用户可能会异常处理 CSS 背景图像。

更多的缺点：如果你想在它上面放置一个预加载器，你将使用 Javascript 并以某种方式选择可翻转的元素，并且按照这个速度，你还不如使用 Javascript 来处理所有事情。

底线：不要将其用于内容丰富的图像。如果您必须远离 Javascript，请为 UI 元素使用精灵，为具有语义意义的图像使用替代解决方案。

于 2010-11-23T20:19:20.823 回答
4 
#btn{
width:100px; height:100px;/*the dimensions of your image*/
background:url(bird.png) left top no-repeat;
}
#btn:hover{
background-position:left bottom;/* pixel references can be used if prefered */
}

使用这样的图像：

替代文字

注意：避免 JS 图像替换，因为如果之前没有缓存图像，则会导致图像加载时间短。

希望这对兄弟有帮助！

W。

于 2010-11-23T19:49:14.970 回答
3

CSS 使用背景和“悬停”

使用 CSS sprites，换句话说，将两个图像合二为一，然后使用 css:hover移动图像。

使用 CSS 的一个优点是即使关闭 JavaScript 也能正常工作。

使用单个图像的一个优点是它可以避免额外的 HTTP 请求。

见：http ://css-tricks.com/css-sprites/

帮助生成图像和 CSS 的工具：

于 2010-11-23T19:45:25.237 回答
0

您应该使用:hoverCSS 规则。

于 2010-11-23T19:41:45.987 回答
0

到目前为止的CSS。尽管您可能想使用 javascript 预缓存您的图像。

于 2010-11-23T19:42:11.307 回答
0

使用'sprites'的图像翻转列出一部分 - sprites CSS

于 2010-11-23T19:42:49.083 回答
0

在 CSS 中使用 CSS 精灵和 :hover 伪类。原因如下：

  1. 通过 JS 或 CSS 切换图像源将导致在浏览器下载新图像时第一次鼠标悬停时“闪烁”。如果您使用精灵，它只是改变位置的一张图像，所以不会眨眼。

  2. 单个图像减少了 HTTP 请求，总体上使网站加载速度更快。

  3. 如果用户禁用了 JavaScript，它就可以工作。

  4. 所有浏览器类型都支持它（桌面，无论如何，没有 :hover 状态的手机浏览器无论如何都不算​​在内）。

更多信息：http ://css-tricks.com/css-sprites/

于 2010-11-23T19:50:09.427 回答
-1 
$('#div1').hover(function(){
  this.style.color='white';
},function(){
 this.style.color='black;
});

或者

$('#div1').onmouseover()...
$('#div1').onmouseout()...
于 2010-11-23T19:45:56.630 回答