用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刪除。

猜您在找 使用checkbox實現純CSS下拉框純css實現select下拉框並排顯示 poi 下拉框實現 bootstrap懸停下拉菜單顯示 js實現可輸入的下拉框 MVC實現多選下拉框 vue實現下拉框可輸入的下拉框（簡易實現）自定義下拉框實現 SAP選擇屏幕下拉框實現