Question

我正在创建一个悬停效果，以便当某个鼠标悬停在图像扫描线上时出现，但无法使该死的叠加图像与图像大小相同。

看看这个小提琴：http://jsfiddle.net/number8pie/wwmPL/

这是HTML：

<div class="container">
 <a href="#">
  <div class="overlay"></div>        
  <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp" repeat>
 </a>
</div>

这是CSS：

.container {
  position: relative;
  max-width: 200px;
}
img {
  width: 100%;
  position: relative;
  z-index: 1;
  padding: 7px;
  border: 1px solid #333;
}
.overlay {
  display: none;
  position: absolute;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 8px;
  background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

a:hover .overlay {
  display: block;
}

如果将鼠标悬停在绿色块上，可以看到扫描线在底部重叠，我想删除此重叠。

图像是动态的，并根据浏览器大小的大小改变大小。

有人有任何建议吗？

Answer 1

问题在于你给它100％的高度和100％的宽度但是你给它保证金。你告诉它是包含a元素的确切大小，但是稍微推了一下。

您需要添加一个额外的容器，删除图像的填充和边框，并将其分配给新容器。

<a href="#">
    <div class="image">
        <div class="overlay"></div>        
        <img src="http://www.mainlymunros.co.uk/images/green%20square.bmp"/>
    </div>
</a>

.container a { 
    display:block;
    padding:7px;
    border: 1px solid #333;
}
.image {
    position:relative;
    width:100%;
    height:100%;
    display:block;
}
img {
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay {
    display: none;
    position:absolute;
    z-index: 5;
    width: 100%;
    height: 100%;
    background: url(https://dl.dropbox.com/u/29825082/scanlines.png) repeat;
}

示例：JSFiddle。

您现在的问题是img 不是正方形。作为宽度大于高度的矩形图像意味着它将填充100％宽度但切掉部分高度。使图像成为正方形或使叠加层具有相同的宽高比，这将完美地运作。

Answer 2

它的padding属性会产生溢出。所以改变图像和.overlay的高度

将会这样做。

 fiddle :http://jsfiddle.net/wwmPL/2/

我希望这能解决你的问题：）

a：悬停图像溢出问题

2 个答案: