Wie Hintergrundfarbe in Hover entfernen und ändern Sie es in Unterstreichung, aber mit Leerzeichen zwischen Text und Zeile in Bootstrap?

Vielen Dank für das Lesen und Beantworten meiner Frage. Was ich gerne machen würde, ist, dass meine Links unterstrichen werden, sobald sie schweben. Ohne Hintergrundfarbe und mit Platz zwischen Text. So etwas wie das mit Bootstrap. enter image description here Wie Hintergrundfarbe in Hover entfernen und ändern Sie es in Unterstreichung, aber mit Leerzeichen zwischen Text und Zeile in 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>

Mit hier CSS, die eine temporäre Unterstreichungs für aktive haben. Wie kann ich das für Hover tun? Ich freue mich auf deine Antwort. Vielen Dank!

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

Quelle

2016-07-23 minori

Nun ist das, warum: Hover existiert :)

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

Hier ist eine Arbeits Geige: https://jsfiddle.net/dp17vjus/

Quelle

2016-07-23 12:08:42

Vielen Dank ! :) – minori

Wie Hintergrundfarbe in Hover entfernen und ändern Sie es in Unterstreichung, aber mit Leerzeichen zwischen Text und Zeile in Bootstrap?

Antwort

Verwandte Themen