2

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

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

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

4

6 回答 6

6

您不能将背景图像添加到图像标签，因为它是不可见的，因为已经有图像覆盖了您的背景。

您想要做的是在图像顶部添加第二个 div，该 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/

于 2013-06-21T01:50:41.240 回答
3

我也有一个方法：

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;
}
于 2013-06-21T02:03:14.627 回答
2

试图在没有 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;
}
于 2013-06-21T02:19:07.167 回答
1

试试这个：

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;
}

请查看演示。

于 2013-06-21T01:55:03.577 回答
1

您可以通过使用更改悬停图像

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/的更新

于 2013-06-21T01:57:27.703 回答
1

也许像这样简单

<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>

您唯一需要做的就是使用带有播放按钮的相同图像作为第二张图像。

于 2013-06-21T01:58:28.247 回答