如何使图像标签悬停

Posted 2023-03-05

【中文标题】如何使图像标签悬停

【英文标题】：how to make a hover for an image tag

【发布时间】：2013-06-18 01:37:00

【问题描述】：

我有几张可用作链接的图片，我想为它们提供悬停效果，因此在悬停时会在它们上方显示一个播放按钮。为此，我创建了一个类并为悬停提供了背景图像，但它不起作用。

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

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

【问题讨论】：

这里是根据我下面的解决方案对您的小提琴的更新 - jsfiddle.net/nkEpd/30

【参考方案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;

请查看demo。

【参考方案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;

【讨论】：

谢谢，您的解决方案是最简单的。

【参考方案3】：

您可以使用

更改悬停时的图像

img:hovercontent:url("hoverimg.jpg");

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

#blanketposition:absolute;top:0;bottom:0;left:0;right:0;
#blanket:hoverbackground-image:url('hoverimg.jpg');

这是你的小提琴http://jsfiddle.net/nkEpd/30/的更新

【参考方案4】：

我也有方法：

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;

【参考方案5】：

也许像 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】：

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

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

【讨论】：

+1，但我会指定在旧浏览器中的锚点上更好地支持悬停，因此仅在锚点上处理翻转可能是一种安全的做法（即：display:block; 格式化锚点）