悬停浏览器元素会破坏展开/折叠侧边栏上的悬停功能

Question

我有一个侧边栏，可以在悬停时展开/折叠。在该侧边栏中，存在具有浏览器生成的autocomplete字段或option字段的诸如input或select的元素。问题是，每当用户悬停在这些字段上时，侧边栏就会折叠。

我该如何防止这种情况发生？

function toggleSidebar() {
$(".sidebar").on("mouseover", function() {
$(".toggle-animation").css({
"width": "360px",
"padding": "20px"
});
$(".filter-icon").css("opacity", "0");
});
$(".sidebar").on("mouseout", function() {
$(".toggle-animation").css({
"width": "60px",
"padding": "0"
});
$(".filter-icon").css("opacity", "1");
});
}

.sidebar {
height: 100%;
width: 60px;
position: fixed;
z-index: 1;
top: 45;
left: 0;
overflow-x: hidden;
}
.sidebar form {
opacity: 0;
}
.sidebar:hover form {
opacity: 1;
transition: all .1s;
transition-delay: .1s;
}
.toggle-animation {
width: 60px;
transition: all .2s;
}
.filter-icon {
width: 20px;
position: absolute;
top: 50%;
left: 20px;
opacity: 1;
transition: all .2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidebar toggle-animation">
<th:block id="filter"></th:block>
<img class="filter-icon" src="/static/images/filter.svg" />
</aside>

Answer 1

您可以做的是替换事件：

使用mouseenter而不是mouseover，使用鼠标离开

检查我下面的测试：当你使用mouseover和mouseout时，它会产生你提到的问题，但当你更改mouseenter和mouseleave的事件时，它工作正常：

$(".sidebar").on("mouseenter", function() {
$(".toggle-animation").css({
"width": "360px",
"padding": "20px"
});

$(".filter-icon").css("opacity", "0");
//insert dynamically some elements to simulate your situation
$(".sidebar").append("<div id='dynamicElements'><input placeholder='Input Field' '><br><select id='selectField'><option>1</option><option>2</option><option>3</option><option>4</option></div>");
});

$(".sidebar").on("mouseleave", function() {



$(".toggle-animation").css({
"width": "60px",
"padding": "0"
});
$(".filter-icon").css("opacity", "1");
//remove the dynamically generated elements
$("#dynamicElements").remove();
});

.sidebar {
height: 100%;
width: 60px;
position: fixed;
z-index: 1;
top: 45;
left: 0;
overflow-x: hidden;
background-color: red;
}
.sidebar form {
opacity: 0;
}
.sidebar:hover form {
opacity: 1;
transition: all .1s;
transition-delay: .1s;
}
.toggle-animation {
width: 60px;
transition: all .2s;
}
.filter-icon {
width: 20px;
position: absolute;
top: 50%;
left: 20px;
opacity: 1;
transition: all .2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<aside class="sidebar toggle-animation">
<th:block id="filter"></th:block>
<img class="filter-icon" src="/static/images/filter.svg" /><br>
</aside>