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

Question

感谢您阅读和回答我的问题。 我想做的就是将我的链接悬停在下划线。 没有背景色，文本之间有空格。 使用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;
}

Answer 1

那就是为什么：hover存在:)

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/

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

问题描述

1 个解决方案

解决方案1
-1 2016-07-23 12:08:42

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

问题描述

1 个解决方案

解决方案1 -1 2016-07-23 12:08:42

解决方案1
-1 2016-07-23 12:08:42