호버 (hover)에서 배경색을 제거하고 밑줄로 바꾸는 방법 (부트 스트랩에서 텍스트와 줄 사이에 공백이있는 경우)?

내 질문을 읽고 대답 해 주셔서 감사합니다. 내가하고 싶은 것은 내 링크에 밑줄이 그어지면 내 링크에 표시하는 것입니다. 배경색이없고 텍스트 사이에 공백이 있습니다. 부트 스트랩을 사용하여 이런 식으로 정리하십시오. 활성에 대한 임시 밑줄이 여기에 CSS와 enter image description here 호버 (hover)에서 배경색을 제거하고 밑줄로 바꾸는 방법 (부트 스트랩에서 텍스트와 줄 사이에 공백이있는 경우)?

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

. 호버를 위해이 작업을 수행하려면 어떻게해야합니까? 당신의 대답을 기대합니다. 감사! 왜

.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 : https://jsfiddle.net/dp17vjus/

출처

2016-07-23 12:08:42

고마워 : 여기

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

이 작업 바이올린입니다 ! :) – minori

호버 (hover)에서 배경색을 제거하고 밑줄로 바꾸는 방법 (부트 스트랩에서 텍스트와 줄 사이에 공백이있는 경우)?

답변

관련 문제