javascript - 悬停时CSS使图像变暗-在其周围添加一个href

Question

我正在使用这个 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");
});

图像可以点击是很重要的，但不知何故我无法让它发挥作用...任何想法和见解都将不胜感激。非常感谢。

Answer 1

用 anchor 标记包裹您的图像，并用 # 分配 href。

<a href="#"><img src="url"/></a>