Question

我的测试脚本中有一个超链接。

当我将鼠标悬停在div上时，会出现一个放大镜。我也应该能够点击并访问Google，但这失败了。

为什么链接不起作用？

感谢您的帮助。

span.text-content {
  background: rgba(23, 165, 195, 0.5);
  color: white;
  cursor: pointer;
  display: table;
  opacity: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
}
ul li:hover span.text-content {
  opacity: 1;
}
.imgCont {
  display: table-cell;/*set display to table cell*/
  vertical-align: middle;/*add vertical align middle*/
  text-align: center;/*add text align to center for horizontal align too*/
}

<ul>
  <li>
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
        <a href="http://www.google.com/"></a>
      <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
    </div>
  </li>
</ul>

Answer 1

我编辑了你的帖子：

http://jsfiddle.net/vhcfha6s/2/

你只需将链接包裹在你的两个＆＃34; span＆＃34;元素。像这样：

    <ul>
  <li>
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
        <a href="http://www.google.com/">
      <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span></a>
    </div>
  </li>
</ul>

Answer 2

您需要将span包裹在a标记内。目前，您的a没有任何内容，因此是0px x 0px小。

<ul>
  <li>
    <div style="background-image:url('http://placehold.it/500x500');background-position: 0 0;background-repeat: no-repeat;background-size:cover;height:300px;">
        <a href="http://www.google.com/">
            <span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
        </a>
    </div>
  </li>
</ul>

Answer 3

它在悬停区域之前关闭了愤怒标记。你需要关闭可行的悬停区域的锚标记，如

ex：http://jsfiddle.net/Muthukumaru/vhcfha6s/3/

<a href="http://www.google.com/">
<span class="text-content"><span class="imgCont"><img src="http://webdesignandsuch.com/posts/jquery-image-rollover/images/mag.png" style="min-width:121px" /></span></span>
</a>

超链接在CSS悬停时不起作用/出现

3 个答案: