Question

我有this代码，带有动画链接下划线。这个ul li由django {% show_menu %}自动生成。

我希望为第三个li元素禁用动画链接 - 带有附加徽标类的img。

我一直在尝试这样的不同解决方案：

a:hover .logo::before {
  display:none;
}

但似乎无法弄明白！请看我的代码，并帮助我（：

Answer 1

问题是之前是在锚点上，并且css中没有用于徽标的父选择器。

我会使用nth-child或nth-oftype选择器（因为您已使用nth-of-type作为徽标单元格的宽度，我会坚持使用它）：

#nav > ul > li:nth-of-type(3) a:hover:before {
  visibility: hidden;
}

Updated fiddle

请注意，如果你改变你的li结构，你将需要改变你的CSS，所以如果导航要改变很多，这不是一个很好的解决方案

Answer 2

您可以将类添加到您不想制作动画的li.G。

#nav > ul > li:not(.noUnderline) a:hover {

}

然后将其从您的css规则中排除：

onBindViewHolder

Answer 3

您可以在锚标记的位置添加 span 。请查看以下链接。

Fiddle

 <div id="nav">
    <ul>
        <li><a href="index.html">Menu 1</a></li>
        <li><a href="index.html">Menu 2</a></li>
        <li><span><img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="" class="logo" /></span></li>
        <li><a href="index.html">Menu 3</a></li>
        <li><a href="index.html">Menu 4</a></li>
    </ul>
</div>

Answer 4

检查fiddle。在动画消失时，您的锚点链接将被设置为保持可点击状态。

<div id="nav">
<ul>
    <li><a class="animate" href="index.html">Menu 1</a></li>
    <li><a class="animate" href="index.html">Menu 2</a></li>
    <li><a href="#"><img src="http://pre08.deviantart.net/ae58/th/pre/f/2012/120/5/9/thundercats_1985_2011_logo_by_pencilshade-d4y2uzr.png" alt="" class="logo" /></a></li>
    <li><a class="animate" href="index.html">Menu 3</a></li>
    <li><a class="animate" href="index.html">Menu 4</a></li>
</ul>

CSS / JS - 删除一个li元素的动画链接下划线

4 个答案: