CSS下拉菜单的奇怪行为 [英] Weird behaviour of CSS Dropdown menu
问题描述
请查看此链接。通过悬停在菜单上，下拉菜单将显示，并暂停。现在，我尝试将菜单更改为 TD 元素，并将图像分配给此 TD 元素，并将鼠标悬停在图像，它将改变图像，并将显示下拉。请参阅以下代码：
Please take a look at this link. By hovering over the 'menu', the drop down menu will show, and it pause. Now I try to changing the menu to a TD element and assign an image to this TD element and while hovering over this image, it will change image and will show drop down. Please refer to the code below:
<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>
当我将鼠标悬停在图像上时，图像将被替换，下拉菜单会向下滑动，但是我不能将鼠标悬停在下拉列表项上，因为下拉菜单会立即滑动。
When I hover over the image, the image does get replaced and drop down menu does slide down, however, I just couldn't hover over the dropdownlist item as the dropdown menu slide up immediately.
推荐答案
尝试
$('#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();
});
Fiddle
当您将鼠标悬停在图像中以鼠标悬停到菜单中时，mouseout将被触发。所以在包装器上应用悬停事件。如果这个包装器不合适，可以创建包装器来包装菜单及其图像并应用悬停效果。
mouseout gets triggered when you hover out of the image to hover into the menu. So apply hover events on a wrapper. If this wrapper is not suitable create a wrapper to wrap menu and its image and apply hover effect on it.
这篇关于CSS下拉菜单的奇怪行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
