javascript - 菜单在鼠标悬停时淡入淡出

Question

<ul style="#" class="hmenu">
    <li class="active selected"><a href="#">Home</a></li>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
</ul>

我有一个菜单，其中一个链接为 active。我使用此脚本在悬停时切换事件类

$('.hmenu li').on('mouseenter', function () {
    $('.hmenu li').removeClass('active');
    $(this).addClass('active');
});
$('.hmenu li').on('mouseleave', function () {
    $(this).removeClass('active');
    $('.hmenu li[class=selected]').addClass('active');
});

这是有效的，但我想更改它，以便当我将鼠标悬停在任何链接上时，该链接应该在鼠标离开时淡入和淡出。

我无法解决这个问题 - 我该怎么做？

这是 fiddle :http://jsfiddle.net/GdSUg/

Answer 1

添加:

transition: all 1s;

到.active类中的css代码

this is an example

有关详细信息，请参阅引用资料:Here