jQuery 鼠标停留样式

1 页面实现ul li之间鼠标停留离开,相应的div展开或隐藏。

2这种写法可以实现移入展示相应div,移出隐藏相应div,但是鼠标离开ul的区域后,无法选中最后一次鼠标停留的地方

<script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery("#tabSelect li").hover(function () {
                    var seid = "#se" + jQuery(this).attr("id") + "";
                    jQuery(this).attr("class", "current");
                    jQuery(seid).show();
                }, function () {
                    var seid = "#se" + jQuery(this).attr("id") + "";
                    jQuery(this).attr("class", "");
                    jQuery(seid).hide();
                });
            });
</script>

3   改进一下写法,siblings取同级兄弟层级,自己加class,兄弟层级移除class,相应div显示,同级div隐藏

    可以实现2所有功能,并能在鼠标离开该区域后,仍有默认显示最后一次鼠标停留的样式。

<script type="text/javascript">
              jQuery(document).ready(function () {
                  jQuery("#tabSelect li").bind("mouseover", function () {
                      jQuery(this).addClass("current").siblings().removeClass('current');
                      var seid = "#se" + jQuery(this).attr("id") + "";
                      jQuery(seid).show().siblings().hide();
                  });
              })       
</script>

posted on 2012-11-14 16:48  judy_ma0605  阅读(1447)  评论(0编辑  收藏  举报

导航