我在将链接定位在图像上时遇到问题。我为此链接使用了不透明度和悬停状态,我设法让它工作,但结果不是我所期望的。悬停不按我想要的方式工作。我相信有更好的方法可以做到这一点,希望有人能够帮助我。谢谢!
这是HTML代码:
<ul id="content-images">
<li><img class="show2" src="img/some_img.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img2.png" width="176" height="168"></li>
<li><img class="show2" src="img/some_img3.png" width="176" height="168"></li>
</ul>
<span class="show"><a href="#">Link1</a></span>
<span class="show"><a href="#">Link2</a></span>
和CSS代码:
.show {
opacity:0.8;
position:relative;
top:10px;
left:10px;
}
.show:hover {
opacity:1.0;
}
.show2 {
left: 1px;
opacity: 0.8;
position: relative;
top: -39px;
}
.show2:hover {
opacity:1.0
}