链接悬停动画下划线

Posted 2023-05-08

【中文标题】链接悬停动画下划线

【英文标题】：Link Hover Animated Underline

【发布时间】：2013-05-09 23:46:19

【问题描述】：

我正在尝试在链接悬停时设置下划线动画。我找到了这个例子：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 似乎忽略了 width:0px 而 Chrome 没有，但我不知道发生了什么或该做什么。任何想法都非常感谢！

【参考方案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 */

【讨论】：

嘿内森！感谢您的回复。我昨晚玩过这个，它有帮助，但我认为我遇到的问题是它强制每个菜单项具有相同的宽度，而不是每个项目的宽度由文本的长度设置.这里的问题是下划线是 20%，而不是下划线文本的长度。另外，在IE9中测试过，动画不工作。没有考虑 IE 中的 webkit。耶。任何关于 jquery 解决方案的想法都会很棒！

@stupendousman 将您的文本放在 标签中，并将效果应用于 标签。这样，只有您的文本会被下划线，而不是整个框。