gpt4 book ai didi

html - 访问子下拉列表并尝试在其中选择元素时如何保持父悬停宽度

转载 作者:可可西里 更新时间:2023-11-01 14:54:04 26 4
gpt4 key购买 nike

这是我在这里的第一篇文章,我真的希望有人能帮助我。我在互联网上搜索了很多,但没有找到任何有用的东西。

这是我的代码:

<!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");
}

演示:http://jsfiddle.net/PRZYN/

关于html - 访问子下拉列表并尝试在其中选择元素时如何保持父悬停宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13474280/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com