0

我有一个菜单。使用 jQuery，我设法在 .mouseenter 上为菜单项添加下划线。这是我的小提琴：

$(document).ready(function(){
    $('a').mouseenter(function(){
        $(this).addClass('script');
   });

    $('a').mouseleave(function(){
        $(this).removeClass('script');
    });
});

HTML：

<div class="nav-wrap">
<ul id="menu">
    <li><a href="#" class="drop">Home</a>
    <li><a href="#" class="drop">Not Home</a>
    <li><a href="#" class="drop">Far Away</a>
    <li><a href="#" class="drop">My Son</a>
</ul>
</div>

http://jsfiddle.net/MSdzp/

我正在使用背景图片，因为我喜欢红色的下划线。但我希望它淡入淡出，而不是仅仅出现在 .mouseenter 上。如果我使用持续时间，它只会等待一段时间才会出现。

是否可以使用jQuery在mouseenter上为菜单项fadeIn添加下划线？还是jQueryUI？

我通过网络搜索，但还没有找到解决方案。第一次在这里发帖。

4

3 回答 3

3

根本不需要图像！http://jsbin.com/atiyew/1/edit

#menu li a {
    color: #EAEAEA;
    /*display:block;*/
    display:inline; /* added */
    text-decoration:none;
    border-bottom:3px solid transparent; /* added */
    -webkit-transition: 0.6s; /* added */
            transition: 0.6s; /* added */
}
#menu li:hover a { /* added */
    border-bottom:3px solid red; 
}
于 2013-06-11T20:00:12.023 回答
2

我会使用边框底部而不是图像，并使用 css 过渡来淡入它。 css 看起来像这样：

#menu li a {
    color: #EAEAEA;
    display:block;
    text-decoration:none;
    border-bottom: 3px solid rgba(255, 0, 0, 0);
    transition: border-color .5s;
}

#menu li:hover a {
    color:#FFF;
    border-color: rgba(255, 0, 0, 1);
    // transition: border-color .5s; // edit: not required, credits to @RokoC.Buljan
}

我也更新了你的小提琴：http: //jsfiddle.net/Pevara/MSdzp/1/

于 2013-06-11T20:00:40.503 回答
0

最好的解决方案是拥有一个具有下划线样式的 css 类，并在要加下划线的元素上启用 css 转换*。然后使用 jQuery toggleClass() 添加/删除这个下划线类。您不需要使用图像，没有它会加载得更快。这是启用所有转换的简单方法，但最好只使用转换所需的规则。

-webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  transition: all 0.2s ease;
于 2013-06-11T19:56:24.783 回答