当我将鼠标悬停在导航栏中的链接上时，如何创建下划线？答案

【问题标题】：How do I create an underline when I hover over links in nav bar?当我将鼠标悬停在导航栏中的链接上时，如何创建下划线？
【发布时间】：2016-09-08 19:35:09
【问题描述】：

当我将鼠标悬停在导航栏中的链接上时，我想创建一个下划线。我不确定我应该定位哪个 id。这是我的 JFiddle：https://jsfiddle.net/gzycz4h8/

提前致谢。

<ul id="nav">
  <li><a href="#">About</a></li>
  <li><a href="#">Writing</a></li>
  <li><a href="#">Multimedia</a></li>
  <li><a href="#">Resume</a></li>
  <li><a href="#">Contact</a></li>
</ul>

【问题讨论】：

您在寻找 java 脚本的答案吗？

标签： html css

【解决方案1】：

你在寻找这样的东西吗？

#nav {
  padding: 10px 0;
  width:700px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  text-decoration: none;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
  margin: 5px;
  text-transform: uppercase;

}
#nav li a {
  text-decoration:none;
}
#nav li a:hover {
    text-decoration: underline;
    text-decoration-color: black;
    -o-transition:.4s;
    -ms-transition:.4s;
    -moz-transition:.4s;
    -webkit-transition:.4s;
    transition:.4s;

}

【讨论】：

是的，但是当我将鼠标悬停在我的链接上时我想要过渡，但我仍然无法更改链接的颜色。不确定我应该定位哪个 ID。 @Dhaval Chheda
要更改链接的任何内容，它应该是 .. 进行样式设置的最佳方法是打开 chrome 并检查元素并查看应用了哪些样式，然后您可以在开发人员工具本身，看看你是否对你得到的东西感到满意..对于过渡，在上尝试这样的操作，而不是在 a:hover transition: all 2s;
我更改了上的过渡。但是，它仍然没有进行过渡。有什么东西挡住了吗？更新的 JFiddle：jsfiddle.net/gzycz4h8/6
查看此帖stackoverflow.com/questions/15489203/underline-css3-transition

【解决方案2】：

或者类似这样的：https://jsfiddle.net/m16gggk1/1/

#nav {
  padding: 0;
  width:700px;
  margin: 0 auto;
  text-align: center;
  list-style-type: none;
  display:block;
  text-decoration: none;
  -webkit-box-shadow: 0 2px 10px -12px #999;
  -moz-box-shadow: 0 8px 6px -6px #999;
   box-shadow: 0 8px 6px -6px #999;
}

#nav li {
  display: inline-block;
  margin: 0 5px;
  text-transform: uppercase;
  border-bottom:2px solid #fff;

}
#nav li a {
  text-decoration:none;
}
#nav li a:hover {
  color:red;
}
#nav li:hover {
    border-bottom:2px solid red;


}

【讨论】：

当我将鼠标悬停在链接上时，如何创建过渡？当我将鼠标悬停在我的文字上时，我想要延迟。我已经在我的 css 中包含了过渡
你可以自己添加它们；）但是你去：jsfiddle.net/m16gggk1/2
很奇怪，我不能用 text-decoration-underline 做到这一点。我想我更喜欢这样，因为有了边框，它实际上会使其他一切都发生了变化？
对不起，还有一个问题。为什么你有 2 个边框底部？感谢您的帮助
如果我只是为悬停添加一个红色边框，每次将鼠标悬停在链接上时导航栏都会跳跃，因为它会扩展整个导航栏。因此，我添加了一个始终存在的白色边框（它看起来很隐藏）以消除悬停时的跳跃。

【解决方案3】：

最简单的解决方案是：

li a {
  text-decoration:none;
}

li a:hover {
    text-decoration: underline;
}

https://jsfiddle.net/LvLsckzw/

【讨论】：