我正在使用这个 CodePen 示例开发一个可点击的图像,在悬停时具有变暗效果:
<div class="pic">
<img src="http://placehold.it/373x300">
<div class="overlay"></div>
<div class="info">
<img src="http://placehold.it/373x100">
<p>Wonder Women</p>
</div>
</div>
<div class="pic">
<img src="http://placehold.it/373x300">
<div class="overlay"></div>
<div class="info">
<img src="http://placehold.it/373x100">
<p>Batman</p>
</div>
</div>
<div class="pic">
<img src="http://placehold.it/373x300">
<div class="overlay"></div>
<div class="info">
<img src="http://placehold.it/373x100">
<p>Joker</p>
</div>
</div>
<div class="pic">
<img src="http://placehold.it/373x300">
<div class="overlay"></div>
<div class="info">
<img src="http://placehold.it/373x100">
<p>Bane</p>
</div>
</div>
CSS:
.pic {
width: 373px;
height: 300px;
position: relative;
display: inline-block;
}
.pic:hover > .overlay {
position: absolute;
top: 0;
width:100%;
height:100%;
left: 0;
background-color:#000;
opacity:0.5;
z-index: 100;
display: block;
}
.info {
display: none;
position: absolute;
top: 100px;
left: 0;
text-align: center;
}
JS:
$(".pic").hover(
function(){
$(".info", this).css("display", "block");
}, function(){
$(".info", this).css("display", "none");
});
图像可以点击是很重要的,但不知何故我无法让它发挥作用...任何想法和见解都将不胜感激。非常感谢。
最佳答案
用 anchor 标记包裹您的图像,并用 # 分配 href。
<a href="#"><img src="url"/></a>
关于javascript - 悬停时CSS使图像变暗-在其周围添加一个href,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36880440/