悬停效果与图像作为背景

Question

我不知道是否有办法做到这一点。我有一个形象

<img src="images/thumb.png" /> 

这些都是图像

float:left; 
border:solid 1px #dadada; 
margin: 0 5px 0 5px; 
padding:5px; 
border-radius:4px; 
-moz-transition: border 0.2s linear 0s; 

现在我想添加一个悬停效果什么的CSS属性，但是这悬停效果有一个形象，像这样一个背景：

border:solid 1px #888888; 
    opacity: 0.4; 
    background: url(images/video.png) no-repeat; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 

我的问题是，我的背景图像悬停效果并没有像我想要的那样显示在我的图像上。

任何帮助将不胜感激。谢谢

Answer 1

下面是一个简单的使用jQuery的方法。你所要做的就是指定hoverImg=""，脚本自动完成剩下的工作。

<img src="http://i.imgur.com/vdDQgb.jpg" hoverImg="http://i.imgur.com/Epl4db.jpg"> 

$('body').find('*[hoverImg]').each(function(index){ 
    $this = $(this) 
    $this.wrap('<div>')  
    $this.parent().css('width',$this.width()) 
    $this.parent().css('height',$this.width()) 
    $this.parent().css('background-image',"url(" + $this.attr('hoverImg')+")") 
     $this.hover(function() { 
      $(this).stop() 
      $(this).fadeTo('',.01)  
     },function() { 
      $(this).stop() 
      $(this).fadeTo('',1)    
     })      
}); 

尝试在这里：http://jsfiddle.net/Diodeus/gYyBL/

Answer 2

您可以在一个div包裹img元素，像这样：

<div class="background"> 
    <img src="images/thumb.png" /> 
</div> 

然后你可以将背景图片应用到div元素，而不是悬停状态下的img元素。

你的CSS应该是这个样子：

img{ 
    float:left; 
    border:solid 1px #dadada; 
    margin: 0 5px 0 5px; 
    padding:5px; 
    border-radius:4px; 
    -moz-transition: border 0.2s linear 0s; 
} 

img:hover{ 
    border:solid 1px #888888; 
    opacity:0.4; /* You can remove this line*/ 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
} 
div.background{ 
    background: url(images/video.png) no-repeat; 
    height: /* same as your img */ 
}