Question

How can I change the colour of underline of a <a> tag when hovering over it?

I done some research and as you cannot directly change the colour of the line you can use the - border-bottom option, I have tried this but when I open it in chrome nothing happens when hovering over it.

.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/

的下划线

Answer 1

当您为浏览器设置border-bottom-color时，您定义了边框的其余属性（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>

Answer 2

您可能无法更改锚标记的下划线颜色。

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

或

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

Answer 3

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

Answer 4

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

如何制作<a> tag change color when hovering over it

4 个答案: