Javascript CSS下拉菜单的怪异行为
请看看这个。将鼠标悬停在“菜单”上,将显示下拉菜单,并暂停。现在我尝试将菜单更改为Javascript CSS下拉菜单的怪异行为,javascript,jquery,html,css,drop-down-menu,Javascript,Jquery,Html,Css,Drop Down Menu,请看看这个。将鼠标悬停在“菜单”上,将显示下拉菜单,并暂停。现在我尝试将菜单更改为TD元素,并将图像分配给该TD元素,当鼠标悬停在该图像上时,它将更改图像并显示下拉列表。请参考以下代码: <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <style> li.li_class
TD
元素,并将图像分配给该TD
元素,当鼠标悬停在该图像上时,它将更改图像并显示下拉列表。请参考以下代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
li.li_class{
display: block;
}
ul.dropDown{
margin:0px;
padding:0px;
}
#clickable_div {width:166px; background-color:#9c9c9c;display:block;}
#nav_menu{width:166px; height:auto; background-color:#CCC;z-index: 99999; display: none;position: absolute;}
#wrap{ width:166px;}
</style>
</head>
<body>
<table>
<tr>
<td><img src="images/ori_12.png">
</td>
<td id='testable'>
<div id='wrap'>
<img src="images/ori_14.png">
<div id="nav_menu">
<ul class="dropDown">
<li class="li_class"><img src="images/ori_12.png"></li>
<li class="li_class"><img src="images/ori_14.png"></li>
<li class="li_class"><img src="images/ori_15.png"></li>
<li class="li_class"><img src="images/ori_16.png"></li>
</ul>
</div>
</div>
</td>
</tr>
<tr>
<td>
abc
</td>
<td>
def
</td>
</tr>
</table>
</body>
<script>
$('#testable img')
.mouseenter(function () {
this.src = this.src.replace('/ori_', '/hover_');
$('#nav_menu').stop(true, true).slideDown();
})
.mouseleave(function () {
this.src = this.src.replace('/hover_', '/ori_');
$('#nav_menu').stop(true, true).slideUp();
});
$('#nav_menu li img')
.mouseover(function () {
this.src = this.src.replace('/ori_', '/hover_');
})
.mouseout(function () {
this.src = this.src.replace('/hover_', '/ori_');
});
</script>
</html>
li.li_班{
显示:块;
}
下拉列表{
边际:0px;
填充:0px;
}
#可单击分区{宽度:166px;背景色:#9c9c9c;显示:块;}
#导航菜单{宽度:166px;高度:自动;背景色:CCC;z索引:99999;显示:无;位置:绝对;}
#包裹{宽度:166px;}
abc
def
$(“#可测试img”)
.mouseenter(函数(){
this.src=this.src.replace('/ori','/hover');
$(“#导航菜单”).stop(true,true.slideDown();
})
.mouseleave(函数(){
this.src=this.src.replace('/hover_','/ori_');
$(“#导航菜单”).stop(true,true.slideUp();
});
$(“#导航菜单li img”)
.mouseover(函数(){
this.src=this.src.replace('/ori','/hover');
})
.mouseout(函数(){
this.src=this.src.replace('/hover_','/ori_');
});
当我将鼠标悬停在图像上时,图像确实会被替换,下拉菜单也会向下滑动,但是,我无法将鼠标悬停在下拉列表项上,因为下拉菜单会立即向上滑动。试试看
$('#testable #wrap').mouseenter(function (e) {
var anc = $(this).children('img').get(0);
anc.src = anc.src.replace('/ori_', '/hover_');
$('#nav_menu').stop(true, true).slideDown();
}).mouseleave(function (e) {
var anc = $(this).children('img').get(0);
anc.src = anc.src.replace('/hover_', '/ori_');
$('#nav_menu').stop(true, true).slideUp();
});
鼠标悬停在图像外并悬停在菜单中时会触发鼠标出。因此,在包装器上应用悬停事件。如果此包装不合适,请创建包装菜单及其图像,并对其应用悬停效果。再次感谢您的帮助。现在下拉
向下滑动
,但是,每个li
元素都没有悬停更改图像效果Bravo!你又一次救了我一天!非常感谢你!