CSS——鼠标移动显示下拉框，变色

以你之姓@ 2022-02-24 12:24 481阅读 0赞

整理一个小Demo: 鼠标移动实现下拉和颜色变化

![20190404082358317.png][]![20190404082423824.png][]

首先分级的样式:

<ul >
               <li class="dropdown"><a href="#">下拉</a>
                <ul class="dropdowncontent">
                   <li><a>你2</a></li>
                   <li><a>你3</a></li>
                   <li><a>你4</a></li>
                </ul>
                </li>
          </ul>

鼠标点击下拉：

<style>
            .dropdowncontent {
               //鼠标移动到位置之前，none，不显示
                display: none;
            }
    
            .dropdown:hover .dropdownconten {
                //hover,鼠标移动到上面的状态，下拉框内容dropdownconten以bolck样式显示
                display: block;
            }
    
            .dropdowncontent li:hover a {
                //dropdowncontent内容显示，鼠标在上停留的时候，显示红色
                color: red;
            }
        </style>

更多有意思的关于下拉框的设计，可以看博客：[CSS中下拉框设计][CSS]

[20190404082358317.png]: https://img-blog.csdnimg.cn/20190404082358317.png
[20190404082423824.png]: /images/20220224/0a384f8ebfa94c5eb19c0b25a2b40ef7.png
[CSS]: https://www.cnblogs.com/yewenxiang/p/6064117.html

发表评论取消回复

表情：

评论列表（有 0 条评论，481人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 下拉框不显示解决方法

学layui时会遇到 layui的下拉框总是显示不出来 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0...

约定不等于承诺〃/ 2024年04月17日 14:37/ 0 赞/ 34 阅读

相关移动端修改下拉框背景

移动端设置下拉框背景：找到下拉框控件，添加初始化后事件 setTimeout(function() \{ var dateEditor = docum

淡淡的烟草味﹌/ 2022年12月27日 08:36/ 0 赞/ 127 阅读

相关鼠标悬浮导航栏显示下拉菜单

在这里介绍鼠标悬停导航栏显示下拉菜单得两种方法，html和css样式就不贴代码了。 1、原生js <script> // window.

布满荆棘的人生/ 2022年10月27日 05:24/ 0 赞/ 368 阅读

相关 html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单

个人信息维护学生信息修改修改密码\--%> 修改密码\--%> 修改密码--%> 退出登录用户：

傷城~/ 2022年10月05日 13:57/ 0 赞/ 305 阅读

相关在屏幕中显示下拉表框

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

港控/mmm°/ 2022年09月26日 03:16/ 0 赞/ 150 阅读

相关在屏幕中显示下拉表框

values: array.xml: <?xml version="1.0" encoding="utf-8"?> <resources>

àì夳堔傛蜴生んèń/ 2022年09月24日 03:29/ 0 赞/ 136 阅读

相关 js下拉框之左右移动

1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3U

分手后的思念是犯贱/ 2022年03月19日 07:54/ 0 赞/ 202 阅读

相关 CSS——鼠标移动显示下拉框，变色

整理一个小Demo: 鼠标移动实现下拉和颜色变化 ![20190404082358317.png][]![20190404082423824.png][] 首先分级的样式:

以你之姓@/ 2022年02月24日 12:24/ 0 赞/ 482 阅读

相关下拉框

1.jsp: <select class=" z9" name="sstage" id="sstage"> <c:forEach items="$\{sstagelis

比眉伴天荒/ 2021年11月23日 03:28/ 0 赞/ 440 阅读

相关 css自定义下拉框样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlu

我会带着你远行/ 2021年07月26日 12:06/ 0 赞/ 833 阅读