Question

我进入了css并删除了所有的文本装饰：下划线但由于某种原因它仍然出现。当你将鼠标悬停在导航栏上时，有人可以告诉我如何删除顶部导航下划线吗？

这是Oleose主题的链接。

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

Answer 1

这是罪魁祸首。它是一个伪元素（：after），它在链接下面形成下划线。

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

只需删除此项或将背景设置为透明。或者甚至更好地删除这个。

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

以下是为下划线制作的样式。

Answer 2

所以你了解那里发生的事情：＆＃34;强调＆＃34;您指的是在链接本身上创建为伪元素:after。如果你没有鼠标悬停在链接上，它就是那里，只是在那种状态下它具有透明的背景色，所以你看不到它。在:hover上，此伪元素的背景颜色更改为#ffffff，因此元素变为可见。这是以过渡方式完成的，所以它不会突然改变，而是会轻柔地改变。

这是使＆＃34;强调＆＃34;可见：

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发生时，它也将保持不可见。你可以随时去那里并在必要时重新激活它！

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

2 个答案: