Question

我不知道是否有办法实现这一目标。我有一张图片

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

这些是该图像的CSS属性

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

现在我想添加一个悬停效果，但这个悬停效果有一个图像作为背景，如下所示：

    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

你可以将img元素包装在div中，如下所示：

<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 */
}

Answer 2

这是使用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/

与图象的翱翔作用作为背景

2 个答案: