如何从Bootstrap主题悬停时删除导航下划线？

问题描述：

我进入了CSS并删除了所有的文字修饰：下划线，但由于某种原因它仍然显示出来。有人可以告诉我如何将鼠标悬停在导航栏上时删除顶部导航下划线？如何从Bootstrap主题悬停时删除导航下划线？

这里是Oleose主题的链接。

http://www.scoopthemes.com/templates/Oleose/Freeze/

你可以用更具体的选择器覆盖它。你可以把你的HTML标记？ –

我尝试添加内联CSS样式=“文字装饰：无;”重写它，但下划线仍然显示。这就是为什么我认为主题可能是通过JavaScript进行文本修饰。您可以使用我在帖子中提供的链接下载主题html。 –

答

这是罪魁祸首。这是一个伪元素（：后），使链接下的下划线。

header .navbar-default ul.navbar-nav li a:hover:after { 
    background: #ffffff; 
}

只要删除此或设置为透明的背景。甚至更好的删除这一个。

header .navbar-default ul.navbar-nav li a:after{ 
    .... 
}

下面是为下划线所作的样式。

这可能是我见过的最长的CSS选择器。为什么他不能只添加修饰符类？ –

@amin这是一个选择器，存在于他的CSS。这应该被删除而不是覆盖。 – TeeDeJee

@TeeDeJee谢谢！我删除了两种css样式，下划线现在不见了:) –

答

所以你明白那里发生了什么：你所指的“下划线”在链接本身上被创建为伪元素:after。如果你不把鼠标悬停在链接上，它就是在那里，只是在那个状态下它有一个透明的背景色，所以你看不到它。在:hover此伪元素的背景颜色更改为#ffffff，因此该元素变得可见。这是以过渡方式完成的，所以它不会突然变化，而是轻微变化。

这是使得“强调”看得见的规则：

header .navbar-default ul.navbar-nav li a:hover:after { 
    background: #ffffff; 
}

如果将其更改为

header .navbar-default ul.navbar-nav li a:hover:after { 
    background-color: transparent; 
}

它将停留无形也当:hover发生。你可以随时去那里并在必要时重新激活它！

哇！ @connexo非常了不起，非常感谢你的解释。我没有正确理解问题。我认为悬停行动实际上产生了下划线。 –

如果您的问题现在得到解答，您应该点击您最喜欢/最能解决您问题的答案旁边的复选标记。 @TeeDeJee速度更快，但解释的东西需要时间。它由你决定。 – connexo

所以你选择了更快，更不详细的答案，这是完美的罚款。如果你至少可以给我答案upvote（标记它有帮助）？ – connexo

如何从Bootstrap主题悬停时删除导航下划线？

相关推荐