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

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

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

为什么链接不起作用

谢谢你的帮助

演示：

span.text-content{
背景：rgba（23165195,0.5）；
颜色：白色；
光标：指针；
显示：表格；
不透明度：0；
宽度：100%；
身高：100%；
-webkit转换：不透明度500ms；
-moz转换：不透明度500ms；
-o-转变：不透明度500ms；
过渡：不透明度500ms；
}
ul li：悬停span.text-content{
不透明度：1；
}
.imgCont{
显示：表格单元格；/*将显示设置为表格单元格*/
垂直对齐：中间；/*添加垂直对齐中间*/
文本对齐：居中；/*将文本对齐添加到水平对齐的中心*/
}

您需要将

span

s包装在

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>

我编辑了你的帖子：

您只需将链接环绕在两个“span”元素周围。像这样：

    <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>

它关闭了悬停区域前的愤怒标签。您需要关闭可行悬停区域的锚定标签，如

例：

---

你的锚点是空白的，如果你在锚点中写了一些东西，你可以跟踪锚点显示的位置和鼠标光标的位置。将你的标签包装到你的目标上。

<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>