jquery之二级导航栏中mouseleave与mouseout的应用-创新互联
今天无聊写了个二级导航栏,发现了一个以前根本没注意的问题,那就是mouseleave的事件。故记录在此,菜鸟飘过。
曲水网站制作公司哪家好,找创新互联!从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作,到程序开发,运营维护。创新互联自2013年起到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联。二级导航栏的功能无非就是鼠标至于某标题上时,显示其若干子标题,离开某标题至于另外一标题时,显示对应的子标题并隐藏其他的子标题。还有,就是鼠标离开所有的标题或子标题时,应隐藏所有的子标题。
一开始便全用mouseover和mouseout事件处理,但发现鼠标离开所有的标题或子标题时,最后一次显示出的子标题没有被隐藏。body代码如下:
[html] view plaincopy
- main
- Autobots
- Optimus Prime
- Bumble Bee
- Ironhide
- Jazz
- Decepticons
- Megatron
- Shockwave
- Soundwave
- Starscream
CSS如下:
[css] view plaincopy
.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如下:
[javascript] view plaincopy
$(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是只有在鼠标指针离开被选元素时,才触发。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
当前题目:jquery之二级导航栏中mouseleave与mouseout的应用-创新互联
标题网址:http://ybzwz.com/article/dedhcp.html