jquery之二级导航栏中mouseleave与mouseout的应用
2013-05-01 19:11
204 查看
今天无聊写了个二级导航栏,发现了一个以前根本没注意的问题,那就是mouseleave的事件。故记录在此,菜鸟飘过。
二级导航栏的功能无非就是鼠标至于某标题上时,显示其若干子标题,离开某标题至于另外一标题时,显示对应的子标题并隐藏其他的子标题。还有,就是鼠标离开所有的标题或子标题时,应隐藏所有的子标题。
一开始便全用mouseover和mouseout事件处理,但发现鼠标离开所有的标题或子标题时,最后一次显示出的子标题没有被隐藏。body代码如下:
CSS如下:
JS如下:
试了一些方法也不行,后来把上述第二项的mouseout事件改为mouseleave则可以,查了资料,mouseout是不论鼠标指针离开被选元素或其子元素,都被触发;而mouseleave是只有在鼠标指针离开被选元素时,才触发。
二级导航栏的功能无非就是鼠标至于某标题上时,显示其若干子标题,离开某标题至于另外一标题时,显示对应的子标题并隐藏其他的子标题。还有,就是鼠标离开所有的标题或子标题时,应隐藏所有的子标题。
一开始便全用mouseover和mouseout事件处理,但发现鼠标离开所有的标题或子标题时,最后一次显示出的子标题没有被隐藏。body代码如下:
<ul class="ul_list"> <li class="li_list">main</li> </ul> <ul class="ul_list"> <li class="li_list">Autobots</li> <li class="sub_li">Optimus Prime</li> <li class="sub_li">Bumble Bee</li> <li class="sub_li">Ironhide</li> <li class="sub_li">Jazz</li> </ul> <ul class="ul_list"> <li class="li_list">Decepticons</li> <li class="sub_li">Megatron</li> <li class="sub_li">Shockwave</li> <li class="sub_li">Soundwave</li> <li class="sub_li">Starscream</li> </ul>
CSS如下:
.ul_list{ width:200px; float:left; text-align:center; padding:0; position:relative;} .li_list{ list-style:none; text-align:center; background:#CCC; height:40px; line-height:40px; font-size:18px; font-family:黑体; color:#000000; cursor:pointer; position:relative;} .sub_li{ list-style:none; text-align:center; background:#CCC; height:40px; line-height:40px; font-size:18px; font-family:黑体; color:#000000; display:none; cursor:pointer; position:relative;}
JS如下:
$(document).ready(function(e) { $(".li_list").mouseover(function(){ $(this).siblings(".sub_li").show("slow"); $(this).parent(".ul_list").siblings(".ul_list").children(".sub_li").hide("slow"); }); $(".ul_list").mouseout(function(){ $(this).children(".sub_li").hide("slow"); }); $(".sub_li").mouseover(function(){ $(this).css({"border-top":"1px #FFFFFF solid", "border-bottom":"1px #FFFFFF solid"}); }); $(".sub_li").mouseout(function(){ $(this).css("border", "none"); }); });
试了一些方法也不行,后来把上述第二项的mouseout事件改为mouseleave则可以,查了资料,mouseout是不论鼠标指针离开被选元素或其子元素,都被触发;而mouseleave是只有在鼠标指针离开被选元素时,才触发。
相关文章推荐
- jquery 中的hover(),mouseleave()&mouseenter()和mouseover()&mouseout()的区别
- jquery优化基本事件--mouseenter、mouseleave和mouseover、mouseout事件的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jquery的mouseleave和mouseout的区别
- jquery中的mouseleave和mouseout的区别 模仿下拉框效果
- jQuery中mouseleave和mouseout的区别
- jquery中的mouseleave和mouseout的区别 模仿下拉框效果
- jquery中mouseover和mouseout以及mouseenter和mouseleave的区别
- 【jQuery应用】导航栏滑块随鼠标移动
- jQuery鼠标事件mouseleave和mouseout的区别
- jQuery中mouseleave和mouseout的区别详解
- jquery中mouseout和mouseleave 事件的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- JQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
- jQuery中mouseleave和mouseout的区别详解