如何删除悬停中的背景色并将其更改为下划线，但Bootstrap中的文本和行之间有空格？

感谢您阅读和回答我的问题。我想要做的是一旦它被徘徊，我的链接就会被加下划线。没有背景颜色和文字之间的空间。使用bootstrap来排序。 enter image description here 如何删除悬停中的背景色并将其更改为下划线，但Bootstrap中的文本和行之间有空格？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Internship Exercise 1</title> 
<link href="css/style.css" rel="stylesheet"> 
<link href="css/bootstrap.css" rel="stylesheet"> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
</head> 
<body><!--Navbar start--> 
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="img/logo.jpg" alt="logo" width="90%"></a> 
     </div> 
     <div class="collapse navbar-collapse navmargin" id="navbarCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li class="active"><a href="#" class="underline">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div>

使用CSS这里有活跃的临时下划线。我怎样才能做到这一点悬停？期待你的回答。谢谢！

.navbar-default .navbar-nav > li > a { 
color: #ffffff; 
} 
.underline { 
    border-bottom: solid 1px #ffffff; 
    display: inline; 
    padding-bottom: 2px; 
}

来源

2016-07-23 minori

嗯，这就是为什么：悬停存在:)

HTML：

<body><!--Navbar start--> 
<nav id="myNavbar" class="navbar navbar-default navbar-default navbar-static-top navpadding" role="navigation"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/2/24/Male_mallard_duck_2.jpg" alt="logo" height="100%"></a> 
     </div> 
     <div class="collapse navbar-collapse navmargin" id="navbarCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Services</a></li> 
      <li><a href="#">Pricing</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
     </div> 
    </div> 
</body>

CSS：

.navbar-default .navbar-nav > li > a { 
color: #ffffff; 
} 
.navbar{ 
    background:pink!important; 
    padding:10px; 
} 
.navbar li *:hover{ 
    color:red!important; 
} 
.navbar li:hover{ 
    border-bottom:3px solid white; 
}

这里是工作提琴：https://jsfiddle.net/dp17vjus/

来源

2016-07-23 12:08:42

非常感谢！ :) – minori

如何删除悬停中的背景色并将其更改为下划线，但Bootstrap中的文本和行之间有空格？

回答

相关问题