Javascript 悬停浏览器元素会中断“展开/折叠”侧栏上的悬停功能

我有一个侧边栏，可以在悬停时展开/折叠。在此侧边栏中，有一些元素，如

input

或

select

，它们具有一个由浏览器生成的

autocomplete

字段或

选项

字段。问题是，每当用户将这些字段悬停时，边栏就会折叠

我怎样才能防止这种情况发生

函数切换边栏（）{
$（“.sidebar”）.on（“鼠标悬停”，函数（）{
$（“.toggle animation”）.css({
“宽度”：“360px”，
“填充”：“20px”
});
$（“.filter icon”）.css（“不透明度”，“0”）；
});
$（“.sidebar”）.on（“mouseout”，function（）{
$（“.toggle animation”）.css({
“宽度”：“60px”，
“填充”：“0”
});
$（“.filter icon”）.css（“不透明度”，“1”）；
});
}

。侧栏{
身高：100%；
宽度：60px；
位置：固定；
z指数：1；
排名前45名；
左：0；
溢出x：隐藏；
}
.边栏表格{
不透明度：0；
}
.侧边栏：悬停窗体{
不透明度：1；
过渡：全部1秒；
转换延迟：.1s；
}
.切换动画{
宽度：60px；
过渡：all.2s；
}
.过滤器图标{
宽度：20px；
位置：绝对位置；
最高：50%；
左：20px；
不透明度：1；
过渡：all.2s；
}

---

您可以做的是替换事件：

使用mouseenter代替mouseover和mouseout 使用鼠标移动

检查我在下面做的测试：当您使用mouseover和mouseout时，它将生成您提到的问题，但是当您更改mouseenter和mouseleave的事件时，它工作正常：

$（.sidebar”）.on（“鼠标指针”，函数（）{
$（“.toggle animation”）.css({
“宽度”：“360px”，
“填充”：“20px”
});
$（“.filter icon”）.css（“不透明度”，“0”）；
//动态插入一些元素以模拟您的情况
$（“.sidebar”）.append（“如果下面的解决方案有帮助，请告诉我