我正在尝试破解的非常简单的坚果。我只使用 CSS 进行图像翻转。当我插入我的 href 链接时,它就是不起作用。我的意思是不起作用,它不像链接那样工作,因此您无法点击进入该页面。弄清楚它与<li>
有关但我不知道是什么。这是我的 HTML 和 CSS:
CSS
ul.navigation,
ul.navigation ul {
margin: 25px 0 0 0;
}
ul.navigation li {
list-style-type: none;
margin:15px;
}
.AboutUsNav{
display: block;
width: 159px;
height: 54px;
background: url('../images/N_About_Us.png') bottom;
text-indent: -99999px;
}
.AboutUsNav:hover {
background-position: 0 0;
}
HTML
<div>
<ul class="navigation">
<li class="AboutUsNav"><a href="/about">About Phin & Phebes Ice Cream</a></li>
<li class="FlavorsNav"><a href="/flavors">Ice Cream Flavors</a></li>
<li class="WheretoBuyNav"><a href="/buy">Where to Buy Our Ice Cream</a></li>
<li class="WholesaleNav"><a href="/wholesale">Wholesale Orders Ice Cream</a></li>
<li class="ContactUsNav"><a href="/contact">Contact Phin & Phebes Ice Cream</a></li>
<li><a href="http://phinandphebes.com/about">about</a></li>
</ul>
</div>
最佳答案
您的 .AboutUsNav
具有 text-indent: -99999px;
,将 a
拉到可点击视口(viewport)之外。
您可能想将负数 text-indent
放在 a
本身,然后将 a
元素设置为 display : 堵塞;宽度:100%;高度:100%
,视情况而定。
关于css - 内部链接 <li> 无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7961795/