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

使用锚标记包裹图像并使用＃。

指定href

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

Answer 2

不需要整个Div链接的图像。

 <a href="#"> <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></a>

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

2 个答案: