0

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

看看这个小提琴：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;
}

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

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

有人有什么建议吗？

4

2 回答 2

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 的不是 square。作为一个宽度大于高度的矩形图像意味着它将填充 100% 的宽度，但会切断部分高度。使您的图像成为正方形或使您的叠加层具有相同的纵横比，这将完美地工作。

于 2013-03-19T13:22:06.850 回答
0

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

那会的。

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

我希望这能解决你的问题:)

于 2013-03-19T13:14:52.227 回答