Question

我想要实现的是将鼠标悬停在图像上，在图像上显示悬停div;我创建了这个JsFiddle，但我不知道如何实现我想要做的事情。

    .hover {
    	  background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
    	  height:75px;
    	  width:75px;
          background-size: contain;
          opacity:0.7;
          }

 <img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
    
    <div class="hover"></div>

Answer 1

<div class="img">
<img src="http://i.imgur.com/QQzdPIF.jpg" height="75px" width="75px"/>
<div id="hover"></div>
</div>

.img:hover #hover{
  display:block;
}

    #hover {
                background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
                height:75px;
                width:75px;
          background-size: contain;
          opacity:0.7;
          position:absolute;
          left:0;
          top:0;
          display:none;
    }

工作小提琴 https://jsfiddle.net/kcdued0s/3/

Answer 2

试试这个

XPathes

Answer 3

我将它包装在一个相对定位的包含div（hoverwrap）中。它只需要属性，因此定位为absolute的子元素将把它作为锚而不是文档。

然后在包装器上设置宽度参数，并将子元素宽度设置为100％，这样它将始终填充包装器的大小。

然后默认隐藏图片，并仅在悬停时显示。（使用display:none值和display:inline-block

完成

.hover {
  background-image: url("https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-image-128.png");
  background-size: contain;
  opacity: 0.7;
}
.hoverwrap {
  position: relative;
}
.hoverwrap img {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.hoverwrap .hover {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  display: none;
}
.hoverwrap:hover .hover {
  display: inline-block;
}

<div class="hoverwrap" style="width:75px;height:75px">

  <img src="http://i.imgur.com/QQzdPIF.jpg" />

  <div class="hover"></div>

</div>

Answer 4

您可以使用CSS

执行此操作

<div>
   <img ... />
   <div class="hover"></div>
</div>

.hover{
   ...
   display:none;
   position:absolute;
   top:0;
   left:0;
}
img:hover .hover {
   display:block;
}

Answer 5

将位置绝对用于悬停图像

-webkit-box-shadow: 0px 0px 121px -17px rgba(0,106,148,1);
-moz-box-shadow: 0px 0px 121px -17px rgba(0,106,148,1);
 box-shadow: 0px 0px 121px -17px rgba(0,106,148,1);
-webkit-box-shadow: inset 0px 0px 103px -17px rgba(0,179,255,1);
-moz-box-shadow: inset 0px 0px 103px -17px rgba(0,179,255,1);
 box-shadow: inset 0px 0px 103px -17px rgba(0,179,255,1);

在图像上悬停显示div over image

5 个答案: