用html css解决下拉框问题

最新推荐文章于 2024-12-26 09:15:00 发布

正在努力学习的小晨

最新推荐文章于 2024-12-26 09:15:00 发布

阅读量590

点赞数 2

分类专栏：笔记文章标签： css html html5 css3

本文链接：https://blog.youkuaiyun.com/qq_41788296/article/details/114002725

版权

笔记专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了如何使用CSS解决下拉框显示和隐藏的问题，通过调整hover属性和定位方式避免了下拉框在鼠标移动时的意外消失，并解决了下拉框撑开父元素以及线条间隙的问题，确保了用户交互体验的顺畅。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标：

一遍弄懂“”下拉框显示“”问题
这是在body里面的配置

<div class="location">
      <div class="current-city">
      	<i class="fas fa-map-marker-alt"></i>
      	<a href="javascript:;">北京</a>
	  </div>
      <!-- 放置城市列表的div -->
      <div class="city-list">
      </div>
</div>

这是目的图在这里插入图片描述

学习思路：

1.鼠标移入“北京”此地名时要显示下拉框（city-list）
代码为：


.current-city:hover +.city-list
       {
           display:block;
       }

在这里插入图片描述
但是发现，下拉框是显示了，但是从地名往下移动下拉框就消失了
（why?因为我们设置的hover只是对current-city设置的，当鼠标不在这上面时hover也就失效了）
所以此方法失效。

2.经过思考不难得到 hover应该给location,代码为：

/* 当鼠标移入到location时，让location后代元素city-list显示 */
 .location:hover .city-list{
            display: block;
        }

此时移入对话框便不会消失，但是会撑开父元素，如下图：

由此想到，应使其脱离文档流–>将city-list使用绝对定位
代码为：
/* 设置绝对定位，使其不占据页面的位置 */ position: absolute;

--------------中间再设置一下current-city:hover等等的一些简单样式（此处省略）-------------------------------------------------------------------

然后还遇到一个问题就是：
中间的这条线如何消除？
在这里插入图片描述
思路：
将padding-bottom 增大两像素，但是由于current-city和city-list是兄弟，所以就变成了，中间会有小缝隙

1.将下拉框往上提 top: 31px;
2.设置current-city在city-list上面：将current-city设置为
position:relative;
z-index: 1;
最后一个问题：当鼠标在下拉框时，北京不显示白底在这里插入图片描述
代码如下：

.current-city:hover
        {
            background-color: white;
            border: 1px solid rgb(204, 204, 204);
            border-bottom: none;
        }

/*应变为：*/
/* 当鼠标移入到location时，让location后代元素current-city显示的效果 */
.location:hover .current-city{
      background-color: white;
      border: 1px solid rgb(204, 204, 204);
      border-bottom: none;
      padding-bottom: 1px;
}

结束！