Question

我试图在链接悬停上设置下划线动画。我找到了这个例子：Underline css3 transition

它在Safari中运行良好。关于我实现代码的方式在Chrome中很有趣，而且对于我的生活我无法理解。

代码：

HTML

<div id="Menu">
<ul>            
<li id="contactmenu">
<a href="#contactpage" class="smoothScroll" style="margin-right:50px">contact</a>
</li>   
<li id="portfoliomenu">
<a href="#portfoliopage" class="smoothScroll">portfolio</a>
</li>
<li id="servicesmenu">
<a href="#servicespage" class="smoothScroll">services</a> 
</li> 
<li id="aboutmenu">
<a href="#aboutpage" class="smoothScroll">about</a>
</li>
<li id="homemenu">
<a href="#homepage" class="smoothScroll">home</a>
</li>  
</ul>
</div>

CSS

#Menu li
{
position: relative;
display: inline-block;
float: right;
font-family: "Baskerville";
font-size: 30px;
list-style-type: none;
text-align: left;
}

div#Menu ul a
{
display: inline-block;
text-decoration: none;
color: white;
border-bottom: 2px solid maroon;
margin-right: 10px;
padding-bottom: 8px;
width: 0px;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}

div#Menu ul a:hover
{
display: inline-block;
text-decoration: none;
color: #91A493;
border-bottom: 2px solid maroon;
margin-right: 10px;
padding-bottom: 8px;
width: 100%;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}

似乎Safari忽略了宽度：0px而Chrome没有，但我无法弄清楚正在发生什么或做什么。任何想法都非常感谢！

Answer 1

我更新了fiddle

我对宽度做了改动。我检查了FF和Chrome，它对我来说很好。如果您仍然在这个小提琴链接上有问题，请告诉我。

我所做的改变。

#Menu li
{
position: relative;
display: inline-block;
float: right;
font-family: "Baskerville";
font-size: 30px;
list-style-type: none;
text-align: left;
    width:20%; /* Added */

}

链接悬停动画下划线

1 个答案: