简体   繁体   中英

How to remove background color in hover and change it to underline but with space between text and line in Bootstrap?

Thank you for reading and answering my question. What I would like to do is have my links underlined once it is hovered. Without background color and with space between text. Sort of something like this using bootstrap. enter image description here

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

With CSS here that have a temporary underline for active. How can I do this for hover? Looking forward to your answer. Thanks!

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

Well that's why :hover exists :)

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

Here is a working fiddle: https://jsfiddle.net/dp17vjus/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM