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) 编辑 收藏 举报