这是我在这里的第一篇文章，我真的希望有人能帮助我。我在互联网上搜索了很多，但没有找到任何有用的东西。
这是我的代码:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$(document).ready(function() {
$('#box').hover(
function () {
$(this).animate({left:"+=180px"}, "fast");
},
function () {
$(this).animate({left:"-=180px"}, "slow");
}
);
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;height:900px;position: absolute;left:-180px; width:200px;">
<div id="skinDiv">
<select name="skin">
<option value="">[ None ]</option>
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
<option value="White">White</option>
</select>
</div>
</div>
</body>
</html>
我正在处理一个网页，我想在左侧设置一个动画菜单。当用户想从菜单中选择一些东西时，他可以将鼠标悬停在它上面，菜单将从监视器的左侧出现到特定页面，例如+200px 向左。用户将有下拉菜单，他可以从中选择内容。
问题是，当用户关注此 html 选择元素时，例如在列表元素父 div 上失去焦点，用户无法从下拉列表中选择任何内容，因为下拉列表也隐藏了。
我希望我说的很清楚，否则我会尝试解释更多。
我希望你能帮助我解决问题，因为我尝试解决了几天，但没有成功。
问候， 米哈
最佳答案
试试这个:
$(document).ready(function() {
$('#handle').mouseenter(slideIn);
$("#box").mouseleave(function() {
$(this).animate({
left: "-=180px"
}, "slow");
$('#handle').mouseenter(slideIn);
});
$("[name='skin']").mouseleave(function(e) {
e.stopPropagation();
});
});
function slideIn() {
if ($("#box")) $("#box").animate({
left: "+=180px"
}, "fast");
$(this).unbind("mouseenter");
}
关于html - 访问子下拉列表并尝试在其中选择元素时如何保持父悬停宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13474280/