用css实现悬停下拉框

本文转载自查看原文 2021-09-24 21:04 169 hover/ css/ 前端

原理：

利用hover及display属性none及block配合。下拉框元素开始display属性为none,hover后改为block;

核心点：

1、为保障后面的元素不被遮挡，应该将下拉框的元素的position，设置为pixed或者absolute;因为这两种定位不占位置；

2、如果下拉框的元素的margin值过高，使得下拉框和hover的元素有一定位置，导致鼠标移动到下拉框时，下拉框消失。此时应该调整margin位置，使其靠近hover元素，以便鼠标能正常移动到下拉框上买呢

<!DOCTYPE html>
<html lang="zh">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       
 
        .menu {
            background-color: blue;
            float: left;
            padding: 8px;
            cursor: pointer;
        }
 
        .options {
            position: absolute;
            display: none;
            width: 100px;
            height: 100px;
            background: #eee;
            /*overflow: auto;*/
        }
 
        .menu:hover .options {
            display: block;
        }
    </style>

</head>
 
<body>
<div id="panel">
    <div class="menu" >
        <div class="title">File</div>
        <div class="options">
            <div><a href="#">123</a></div>
            <div><a href="#">123</a></div>
            <div><a href="#">123</a></div>
            <div><a href="#">123</a></div>
            <div><a href="#">123</a></div>

        </div>

    </div>
    
</div>
<br>
<br>
<div>
ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>
</body>
 
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 css实现下拉框使用checkbox实现纯CSS下拉框纯css实现select下拉框并排显示 css实现文本框和下拉框结合的案例鼠标悬停控制下拉框的显示和隐藏 poi 下拉框实现 bootstrap悬停下拉菜单显示 jquery easyui 多选下拉框的实现 Vue实现树形下拉框 layui下拉框实现级联