Question

我知道如何设置悬停在图片效果上，但我无法让我只显示图像的一部分。

我希望在此网站上设置悬停效果：http://gamlinwhiskeyhouse.com/其中叠加层仅占用图像的一部分，同时显示另一个图像，文本和多个链接覆盖的顶部。我的意思是，我知道他们正在使用wordpress，但我试图在html和css中重新创建效果。

这就是我目前正在使用的内容：

#myImage {
    position: relative;
    background: #0f0;
    width: 100px;
    height:100px;
}

#innerHover {
    position: absolute;
    top: 0/**distance from top of image */;
    left:0 /**distance from left of image */;
    width:100% /**region width*/;
    height:100% /**region height*/;
    overflow:show;
}
#popupdiv{
    background:#f00;
    width:80px;
    height:80px;
}
#innerHover #popupdiv{
   display:none;
}
#innerHover:hover #popupdiv{
    display:block;
}


 <div id="myImage">
    <div id="innerHover" title="hover text"><div id="popupdiv">pop up content.</div></div>
</div>

http://jsfiddle.net/DVWkT/185/

但是我需要弹出窗口的边框宽度为5px，透明度为90％，我不会让它为我工作。

Answer 1

他们是怎么做到的？

具有间距余量的绝对定位的叠加层。不需要额外的内部元素。

    #myImage {
      position: relative;
      background: #0f0;
      width: 100px;
      height: 100px;
    }
    #popupdiv {
      background: #f00;
      position: absolute;
      top: 0;
      left: 0/ right: 0;
      bottom: 0;
      margin: 10px;
      /* space around */
      display: none;
    }
    #myImage:hover #popupdiv {
      display: block;
    }

<div id="myImage">

  <div id="popupdiv">Fancy pop up content.</div>

</div>

我如何将鼠标悬停在gamlinwhiskeyhouse.com上只占用一部分图像？

1 个答案: