如何为图像标记悬停

Question

我有一些图片作为链接,我想给他们悬停效果,所以在悬停时,他们会出现一个播放按钮.为此,我创建了一个类并为悬停提供了一个背景img,但它不起作用.

.img:hover {
background:url(http://i40.tinypic.com/i3s4dc.png);
}

这就是我所做的:http://jsfiddle.net/nkEpd/

Answer 1

您无法将背景图像添加到图像标记,因为它已经隐藏,因为已经有一个图像覆盖您的背景.

你想要做的是在你的图像上添加第二个div,它将悬停显示背景图像.

关键是要添加像这样的html:

<a href="/">
    <div class="container">
        <img class="img" src="http://i42.tinypic.com/2v9zuc1.jpg" />
        <div class="overlay"></div>    
    </div>    
</a>

css:

.container{
    position:relative;
    width:184px;
    height:104px;
}
.img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;   
    z-index:100;
}

.overlay:hover{
     background:url(http://i40.tinypic.com/i3s4dc.png);
 }

在这里小提琴:http://jsfiddle.net/nkEpd/13/