Wie man eine Unterstreichung von einem <a> Tag Farbe beim Schweben über es machen

Wie kann ich die Farbe der Unterstreichung eines <a> Tags ändern, wenn Sie darüber schweben?Wie man eine Unterstreichung von einem <a> Tag Farbe beim Schweben über es machen

Ich habe etwas Forschung und da Sie die Farbe der Linie nicht direkt ändern können Sie die - border-bottom Option verwenden, habe ich dies versucht, aber wenn ich es in Chrom öffnen passiert nichts beim Schweben über es.

.nav-main { 
 
    width:100%; 
 
    background-color: #222; 
 
    height:70px; 
 
    color:#fff; 
 
    display:flex; 
 
    justify-content: center; 
 
} 
 

 
.nav-main > ul { 
 
    margin:0; 
 
    float:left; 
 
    list-style-type: none; 
 
} 
 

 
.nav-main > ul > li { 
 
    float:left; 
 
    padding-left: 10px; 
 
} 
 

 
.nav-item { 
 
    display:inline-block; 
 
    padding:15px 20px; 
 
    height:40px; 
 
    line-height:40px; 
 
    color:#fff; 
 
    text-decoration:none; 
 
} 
 

 
.nav-item:hover { 
 
    border-bottom-color: #00cc00; 
 
}

<nav class="nav-main" id="navMain"> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="nav-item"> HOME</a>        
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">ABOUT US </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">PORTFOLIO </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">SERVICES </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">CONTACT US </a> 
 
    </li> 
 
    </ul> 
 
</nav>

JS FIDDLE

http://jsfiddle.net/dgc4q/42/

Quelle

2016-06-07 Bucky Thomas

Und Sie, dass die Grenze unsichtbar und Setup Farbe Ursache Sichtbarkeit der Grenze zu denken? Sie müssen die vollständige Grenzdeklaration schreiben: border-bottom: 2px solid # 00cc00 zum Beispiel. –

Wenn Sie border-bottom-color der Browser assome gesetzt, dass Sie den Rest der Eigenschaften der Grenze definiert (type und width). Du hast es nicht getan.

So müssen Sie

border-bottom-color: #00cc00;

border-bottom: 1px solid #00cc00;

Live ändern:

.nav-main { 
 
    width:100%; 
 
    background-color: #222; 
 
    height:70px; 
 
    color:#fff; 
 
    display:flex; 
 
    justify-content: center; 
 
} 
 

 
.nav-main > ul { 
 
    margin:0; 
 
    float:left; 
 
    list-style-type: none; 
 
} 
 

 
.nav-main > ul > li { 
 
    float:left; 
 
    padding-left: 10px; 
 
} 
 

 
.nav-item { 
 
    display:inline-block; 
 
    padding:15px 20px; 
 
    height:40px; 
 
    line-height:40px; 
 
    color:#fff; 
 
    text-decoration:none; 
 
} 
 

 
.nav-item:hover { 
 
    border-bottom: 1px solid #00cc00; 
 
}

<nav class="nav-main" id="navMain"> 
 
    <ul> 
 
    <li> 
 
     <a href="#" class="nav-item"> HOME</a>        
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">ABOUT US </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">PORTFOLIO </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">SERVICES </a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">CONTACT US </a> 
 
    </li> 
 
    </ul> 
 
</nav>

Quelle

2016-06-07 15:17:13

Sie können die Unterstreichungsfarbe eines Anker-Tags möglicherweise nicht ändern.

.nav-item:hover{ 
border-bottom: 1px solid #00cc00; 
}

Oder

.nav-item:hover{ 
border-style: solid; 
border-bottom-color: #00cc00; 
border-bottom-width: 1px; 
}

Quelle

2016-06-07 15:24:10 Pushpendra

arbeitet an Firefox –

Änderung .nav-Artikel dazu:

.nav-item { 
display:inline-block; 
padding:15px 20px; 
height:40px; 
line-height:40px; 
color:#fff; 
text-decoration:none; 
border-bottom:1px solid transparent; 
} 

.nav-item:hover { 
    border-bottom:1px solid #00cc00; 
}

Quelle

2016-06-07 15:26:32

<!DOCTYPE html> 
<html> 
<head> 
<style> 
/* unvisited link */ 
a:link { 
    color: red; 
} 

/* visited link */ 
a:visited { 
    color: green; 
} 

/* mouse over link */ 
a:hover { 
    color: hotpink; 
} 

/* selected link */ 
a:active { 
    color: blue; 
} 
</style> 
</head> 
<body> 

<p><b><a href="#" target="_blank">This is a link</a></b></p> 

</body> 
</html>

Quelle

2016-06-07 15:38:40

Während dieses Code-Snippet die Frage lösen kann, [hilft eine Erklärung] (https://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) wirklich zu verbessern Qualität Ihres Beitrags. Denken Sie daran, dass Sie die Frage für Leser in der Zukunft beantworten, und diese Leute könnten die Gründe für Ihren Codevorschlag nicht kennen. Bitte versuchen Sie auch nicht, Ihren Code mit erklärenden Kommentaren zu füllen, dies reduziert die Lesbarkeit sowohl des Codes als auch der Erklärungen! –

Wie man eine Unterstreichung von einem <a> Tag Farbe beim Schweben über es machen

Antwort

Verwandte Themen