{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 傲 的问题《Weird behaviour of CSS Dropdown menu》','https://www.manongdao.com/q-1115163.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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.
Try
Fiddle
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.