小编Nik*_* L.的帖子

所以,我有这个.

HTML

<div id="navholder" class="bgd">
<nav id="nav">
    <ul>
        <li><a href="">???????</a></li>
        <li><a href="">?????????</a></li>
        <li><a href="">?????????</a></li>
        <li><a href="">??????</a></li>
        <li><a href="">????????</a></li>
        <li><a href="">???????</a></li>
    </ul>
</nav>
</div>

#navholder {
height: 60px;
text-align: center;
margin: 0 auto;
    }

#nav {
height: 30px;
margin-top: 10px;
background: #B8860B;
    }

#nav ul li{
margin-top: 3px;
display: inline;
font-size: 120%;
opacity: 1.0;
    }

#nav ul li a {
display: inline-block;
height: 120%;
padding: 5px;
-webkit-box-shadow: -1px 0px 22px rgba(50, 50, 50, 0.5);
-moz-box-shadow:    -1px 0px 22px rgba(50, 50, 50, …

我已经制作了一个脚本,用于在将鼠标移动到其中的元素后动画我的菜单li元素.

一切都很好,但我想要别的东西.我希望效果不会消失,只要鼠标悬停在元素上就会停留.

使用什么功能？

脚本到目前为止:

 jQuery(document).ready(function($){
        $(".main-navigation a").mouseover(function() {
        $(this).parent().animate({
    backgroundColor: "green"
    }, "normal"),
    $(this).parent().animate({
    backgroundColor: "transparent"
    })
    .mouseleave(function() {
    $(this).parent().animate({
    backgroundColor: "transparent"
    }, "normal")
    });
    });
});

http://jsfiddle.net/neugu8r9/