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

CSS/JS - Remove Animating Link Underlines for one li element

本文关键字：元素 li 一个 动画 下划线 链接 JS CSS      更新时间：2023-09-26

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

我想动画链接被禁用的第三个li元素- img与附加的标志类。

我一直在尝试不同的解决方案，比如这个:

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

但似乎不明白!请查看我的代码，并帮助我(:

问题是before在锚点上，而css中没有标识的父选择器

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

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

更新小提琴

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

你可以给你不想动画的li添加一个类，例如

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

，然后从你的CSS规则中排除它:

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

可以在锚标签的位置添加span。查看下面的链接。

小提琴

 <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>

检查你的小提琴。当动画消失时，您的锚链接将保持可点击。

<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>

相关文章：