<a>懸停在標簽</a>下划線時如何使其<a>顏色改變</a>
[英]How to make a underline of a <a> tag change color when hovering over it
問題描述
將<a>懸停在<a>標記下划線時該如何更改顏色？
我做了一些研究，由於您不能直接更改線條的顏色，因此可以使用border-bottom選項，我已經嘗試過此方法，但是當我在chrome中打開它時，將鼠標懸停在其上時沒有任何反應。
.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菲德爾
4 個解決方案
解決方案1
1 已采納 2016-06-07 15:17:13
當您設置border-bottom-color ，瀏覽器就像您定義了其余的border屬性（ type和width ）一樣。 你沒做
所以，你需要改變
border-bottom-color: #00cc00;
至
border-bottom: 1px solid #00cc00;
生活：
.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>
解決方案2
1 2016-06-07 15:24:10
您可能無法更改錨標記的下划線顏色。
.nav-item:hover{
border-bottom: 1px solid #00cc00;
}
要么
.nav-item:hover{
border-style: solid;
border-bottom-color: #00cc00;
border-bottom-width: 1px;
}
解決方案3
0 2016-06-07 15:26:32
將.nav-item更改為：
.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;
}
解決方案4
0 2016-06-07 15:38:40
<!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>
如何在HTML中使用HTML轉換顏色並使用CSS刪除下划線？
[英]How can I make a link in HTML turn a color when hovering and remove the underline using CSS?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.