Comment supprimer la couleur d'arrière-plan dans Hover et la changer pour souligner mais avec l'espace entre le texte et la ligne dans Bootstrap?

Merci d'avoir lu et d'avoir répondu à ma question. Ce que je voudrais faire, c'est que mes liens soient soulignés une fois qu'il est plané. Sans couleur d'arrière-plan et avec espace entre le texte. Une sorte de quelque chose comme ça en utilisant bootstrap. enter image description here Comment supprimer la couleur d'arrière-plan dans Hover et la changer pour souligner mais avec l'espace entre le texte et la ligne dans 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>

Avec CSS ici qui ont un soulignement temporaire actif. Comment puis-je faire cela pour un vol stationnaire? Dans l'attente de votre réponse. Merci!

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

Source

2016-07-23 minori

Eh bien, c'est pourquoi: hover existe :)

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

est ici un violon de travail: https://jsfiddle.net/dp17vjus/

Source

2016-07-23 12:08:42

Merci beaucoup ! :) – minori

Comment supprimer la couleur d'arrière-plan dans Hover et la changer pour souligner mais avec l'espace entre le texte et la ligne dans Bootstrap?

Répondre

Questions connexes