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/

Answer 2

我也有一个方法：

http://jsfiddle.net/nkEpd/28/

HTML

<a href="/" class="gallerypic">
  <img src="http://i42.tinypic.com/2v9zuc1.jpg" class="pic" />
  <span class="zoom-icon"><img src="http://i40.tinypic.com/i3s4dc.png"></span>
</a>

CSS

a.gallerypic{
  position:relative;
  display:block;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:0%;
  top:15%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

Answer 3

试图解决它没有js和没有额外的标记。这是我的解决方案，将一个伪元素添加到锚标记中，这样当它悬停时，伪元素背景就会显示出来。你只需要调整它的高度到你的“游戏”按钮的png高度，这样就可以得到合适的尺寸。

http://jsfiddle.net/gleezer/jmXdh/1/

HTML与你的小提琴保持一致，没有额外的元素，css是这样的：

a{
position: relative;
}

a:hover:before {
background:url(http://i40.tinypic.com/i3s4dc.png) no-repeat center center;
content:"";
width: 100%;
height: 100px;
position: absolute;
left: 0;
}

Answer 4

试试这个：

a{
display:block;
    width:184px;
    height: 104px;


}
a:hover {
    background:url(http://h.hiphotos.baidu.com/album/w%3D310%3Bq%3D75/sign=4e5a4bd9b219ebc4c0787098b21dbec1/adaf2edda3cc7cd9ba7b40653801213fb80e9133.jpg);
  background-size: 100%;

}

a:hover .img {
    display: none;
}

请查看demo。

Answer 5

您可以使用

在悬停时更改图像

img:hover{content:url("hoverimg.jpg");}

您的另一个选择是在图像上盖上毯子，并在悬停时对其应用背景图像。毯子需要绝对定位以覆盖底层图像。

#blanket{position:absolute;top:0;bottom:0;left:0;right:0;}
#blanket:hover{background-image:url('hoverimg.jpg');}

这是您的小提琴http://jsfiddle.net/nkEpd/30/

的更新

Answer 6

也许就像 THIS

这样简单

<a href="/">
    <img src="http://i42.tinypic.com/2v9zuc1.jpg"
    onmouseover="this.src='http://news.cnet.com/i/bto/20080112/small_car.jpg'"             
    onmouseout="this.src='http://i42.tinypic.com/2v9zuc1.jpg'"/>
</a>

只有您需要做的事情就是将相同的图像与播放按钮一起用作第二张图像。

如何为图像标记悬停

6 个答案: