将鼠标悬停在页脚中的链接不起作用答案

【问题标题】：Hover on Links in Footer not Working将鼠标悬停在页脚中的链接不起作用
【发布时间】：2011-09-24 10:29:00
【问题描述】：

我无法让 :hover 在我的页脚链接上运行。这和z-index有关吗？

谢谢！

网址：http://bonusest.com/clients/republican_committee/

【问题讨论】：

你应该设置一个小提琴：jsfiddle.net 展示你遇到的问题。

标签： css hover hyperlink

【解决方案1】：

似乎 .links 和 .contact div 不包含任何实际链接 - 您需要将它们包装在主导航中的锚标记中。

至于 .social div，这应该可以：

<h4>Find Us</h4>
<ul>
    <li id="facebook"><a href="#">facebook</a></li>
    <li id="twitter"><a href="#">twitter</a></li>
    <li id="picassa"><a href="#">picassa</a></li>       
</ul>

您需要保留 text-indent:-9999px 以隐藏文本。要添加悬停状态，只需定位 #facebook:hover

【讨论】：

我主要关注 .social div - 其余的只是填充物。我删除了 -9999 文本缩进以及文本 - 但它仍然不起作用。想法？谢谢！
再次感谢您的回复。不知何故，它仍然无法正常工作。我继续在 .links div 中的文本周围放置了一些锚标记，但那里也没有。我完全糊涂了。这里又是链接-bonusest.com/clients/republican_committee
再次检查了您的网站，并没有看到 .social div 下的 ul 列表，因此无法真正帮助解决问题。至于 .links div，添加 <a> 不会使其成为链接，您需要设置一个参数，例如 <a href="#"> 才能在浏览器中显示为链接

【解决方案2】：

问题是您的主 div id page-wrap 位于页脚的顶部（重叠），因此无法单击页脚中的链接。

【讨论】：

感谢您的帮助！我刚刚尝试完全删除那个#page-wrap div（警告：页面结构现在有点时髦），但它仍然不起作用。与以前相同的链接 - bonusest.com/clients/republican_committee