鼠标hover父级添加overflow，弹出框被隐藏问题
2018-11-16 本文已影响46人
5df463a52098
遇到一个需求，左侧一级下拉列表添加滚动条，鼠标hover，右侧显示弹出框。
写着写着出现问题：
1、给父元素添加overflow：scroll，子元素的弹出框会受影响。
2、效果做完之后滚动条会影响效果，鼠标在经过滚动条移动到右侧弹出框，弹出框直接消失。
百度发现：添加overflow的元素，该元素的后代元素，以及所有相对于该元素和后代元素定位的元素都会受到影响。
解决方法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
.aa{
position: relative;
width: 200px;
}
.container{
width: 200px;
height: 500px;
overflow-y: auto;
}
.lf{
width: 100%;
}
.item{
line-height: 40px;
border-bottom: 1px solid blue;
}
.overItem{
display: none;
/*display: block;
width: 100px;
position: absolute;
right: -200px;
top: 0;
border: 1px solid red;*/
}
.lf:hover .overItem{
display: block;
width: 100px;
position: absolute;
right: -200px;
top: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="aa">
<div class="container">
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上11</p>
<p>事实上是事实上111</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上222</p>
<p>事实上是事实上222</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
<div class="lf">
<div class="item">
<span>结合哈哈哈哈哈哈哈哈</span>
</div>
<div class="overItem">
<p>事实上是事实上</p>
<p>事实上是事实上</p>
</div>
</div>
</div>
</div>
<script>
</script>
</body>
</html>
效果图：
image.png
