我有一个 div,当您将鼠标悬停在其容器上时,该 div 会出现,并且该 div 是绝对定位的,因此它会出现在其容器之外。它里面有多个选择下拉菜单,当我尝试更改其中任何一个的值时,焦点就会丢失,它会触发容器上的鼠标移出。
我在这里设置了这个问题的一个工作示例:
http://jsfiddle.net/uBjR3/2/ http://jsfiddle.net/uBjR3/2/
此问题出现在 FireFox 和 IE 中(Chrome 似乎工作正常)。
=====
HTML:
<div class="container">
<div class="dropdown">
<select>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
<option>option 4</option>
</select>
</div>
</div>
CSS:
.container { background-color: red; height: 30px; width: 60px; padding: 20px; position: relative; }
.dropdown { background-color: blue; height: 300px; width: 200px; padding: 20px; position: absolute; top: 70px; left: 0px; display: none; }
JQuery:
$('.container').hover(
function () {
$('.dropdown').show();
},
function () {
$('.dropdown').hide();
}
);
我刚刚看了你的代码。用这个替换你的 jQuery,它将按照你的意愿工作
$(document).ready(function(){
$('.container').hover(function(){
$('.dropdown').stop(1).slideDown();
},function(){
$(".dropdown").stop(1).slideUp();
});
});
这是工作演示http://jsfiddle.net/kevinPHPkevin/uBjR3/11/ http://jsfiddle.net/kevinPHPkevin/uBjR3/11/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)