底线

对于内容丰富的图像,您希望 src 在HTML标记中。您希望使用Javascript解决方案并将滚动图像放入属性中。

对于内容较少的图像UI元素,特别是那些在整个站点中常见或重复的元素,一个直接的CSS解决方案将是最好的(因此您不必在每次调用时重新声明图像位置)。在CSS解决方案中,sprite是最好的,因为它们不需要预加载开销。

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+two背景图像解决方案更糟糕。将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中并集中在CSS中是很奇怪的。使将来的修改更加困难。也就是说,如果你有一个场景需要一个滚动图像,那么它很可能是一个非内容图像(例如,一个UI元素),在这种情况下,CSS在语义上(也许)甚至比普通图像更合适。请参阅下面关于精灵的注释。

其他缺点: 您必须小心地声明图像的高度和宽度(无论如何,这是一个很好的实践,但是当您只想完成任务时,它可能会变得很麻烦)。在移动浏览器上查看CSS背景图像的用户可能会异常。

更不利的是: 如果你想在上面放置一个预加载程序,你需要使用Javascript并以某种方式选择可滚动的元素,以这种速度,你也可以使用Javascript来处理所有事情。

底线: 不要将此用于内容丰富的图像。如果必须远离Javascript,则对UI元素使用sprites,对语义有意义的图像使用备用解决方案。

#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映像替换,因为如果以前未缓存映像,则会导致较短的映像加载时间。

希望这对兄弟有帮助!

西。

使用背景和“悬停”的CSS

使用CSS精灵,换句话说,将两个图像合并为一个,然后使用CSS :hover 移动图像。

使用CSS的一个优点是即使JavaScript被关闭,它也能工作。

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

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

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

• http://csssprites.com/
• http://css-sprit.es/

你应该用 :hover CSS规则。

CSS。尽管您可能希望使用javascript预处理图像。

使用“精灵”的图像滚动 List a part - sprites CSS

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

1. 在浏览器下载新图像时,通过JS或CSS切换图像源将导致第一个鼠标上的“闪烁”。如果你使用精灵,它只是一个改变位置的图像,所以没有闪烁。

2. 单个映像减少了HTTP请求,使站点加载速度通常更快。

3. 如果用户禁用了JavaScript,它就会工作。

4. 所有浏览器类型都支持它(桌面、任何方式、没有:悬停状态的手机浏览器无论如何都不算数)。

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

$('#div1').hover(function(){
  this.style.color='white';
},function(){
 this.style.color='black;
});

或

$('#div1').onmouseover()...
$('#div1').onmouseout()...