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

【问题标题】：CSS/JS - Remove Animating Link Underlines for one li elementCSS/JS - 删除一个 li 元素的动画链接下划线
【发布时间】：2015-11-05 00:09:09
【问题描述】：

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

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

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

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

但似乎无法弄清楚！请查看我的代码，并帮助我（：

【问题讨论】：

标签： javascript jquery html css django

【解决方案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，因此如果 nav 会发生很大变化，这不是一个很好的解决方案

【讨论】：

漂亮！而已！非常感谢：D
欢迎您，如果您想让它更能处理动态导航，那么您可以考虑为父 li 添加一个类：check this post

【解决方案2】：

你可以给你不想动画的 li 添加一个类，E.G.

<li class="noUnderline><a href="#">

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

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

}

【讨论】：

我认为这样做可能比使用 nth-child 方法更好，因为您将来可能会添加更多 li，这可能意味着它并不总是第三个孩子。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：