1

我正在尝试在链接悬停时设置下划线动画。我找到了这个例子：下划线 css3 过渡

它在 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 忽略了 width:0px 而 Chrome 没有，但我不知道发生了什么或该做什么。任何想法都非常感谢！

4

1 回答 1

1

我已经更新了小提琴

我已经对宽度进行了更改。我签入了 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 */

}
于 2013-05-15T12:31:21.853 回答