鼠标hover父级添加overflow，弹出框被隐藏问题

作者: 5df463a52098 | 来源:发表于2018-11-16 09:37 被阅读46次

鼠标hover父级添加overflow，弹出框被隐藏问题
vue中禁止遮罩底层页面滑动
原生js实现[2] 延时提示框
搭建环境，修改南京项目
常见的清除浮动的方法
17-jQuery方法之hover和简单动画
css：探讨BFC的理解及使用
IOS 解决border-radius overflow:hi
dagre-d3 项目实践
多级菜单hover效果

遇到一个需求，左侧一级下拉列表添加滚动条，鼠标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