CSS imgBox 链接无效

Question

我正在尝试为我的站点编写导航栏代码，但在我实施 css imgBox 后，我的链接立即停止工作。它们在同一个目录中，所以我不认为这是问题所在，但对于我来说，我无法弄清楚出了什么问题这是 HTML 代码

<ul id="menu">
    <li> <div class="imgBox"  id="img1"> <a href="index.html"> </a> </div> </li>
    <li> <div class="imgBox"  id="img2"> <a href="Media.html"> </a> </div> </li>  
    <li> <div class="imgBox"  id="img3"> <a href="social-media.html"> </a> </div> </li>
</ul>

这是 css

.imgBox
{
    float:left;
    border: 1px solid #9325BC;
}
#img1
{
    background: url(images/home.png) no-repeat;
    width: 129px;
    height: 50px;
}

#img2
{
    background: url(images/media.png) no-repeat;
    width: 112px;
    height: 50px;
}

.imgBox:hover
{
    -moz-box-shadow: 0 0 30px #0000cc;
    -webkit-box-shadow: 0 0 30px #0000cc;
    box-shadow: 0 0 30px #0000cc;
}

任何帮助将不胜感激

Answer 1

<ul id="menu">
<li><a href="index.html"> <div class="imgBox"  id="img1">  </div></a> </li>
<li><a href="Media.html"> <div class="imgBox"  id="img2"></a>  </li>  
<li><a href="social-media.html">  <div class="imgBox"  id="img3"> </a></li>
</ul>

这是你想要做的吗？

Answer 2

您必须关闭所有打开的标签。 link 个标签和 div 个标签。此外，如果您希望您的 link 可见，它必须至少包含一个词或图像。

<ul id="menu">
    <li><div class="imgBox"  id="img1"> <a href="index.html">Index</a> </div> </li>
    <li> <div class="imgBox"  id="img2"> <a href="Media.html">Media</a> </div></li>  
    <li> <div class="imgBox"  id="img3"> <a href="social-media.html"> Social media</a></div></li>
</ul>

Answer 3

您的问题的工作版本可以在这里找到：JSFIDDLE

<li> <div class="imgBox"  id="img1"> <a href="index.html"> Some Text here</a> </div> </li>

问题是您没有关闭 href 元素

CSS imgBox 链接无效

CSS imgBox Links not working

html

css

href

hyperlink