CSS中如何实现悬停出现下拉框?在前端开发中,我们经常需要在网页中添加下拉框来方便用户选择。而当鼠标悬停在某个特定元素上时,下拉框则会出现。那么,CSS中怎样实现这个交互效果呢?对于悬停出现下拉框的效
<div class="dropdown"> <a class="dropdown-trigger" href="#">选择一项</a> <div class="dropdown-menu"> <ul class="dropdown-options"> <li class="dropdown-item">选项A</li> <li class="dropdown-item">选项B</li> <li class="dropdown-item">选项C</li> </ul> </div> </div>
.dropdown-menu { display: none; } .dropdown-trigger:hover + .dropdown-menu { display: block; }
.dropdown-trigger:hover { background-color: #f2f2f2; border-radius: 4px; } .dropdown-options { border: 1px solid #ccc; padding: 10px; } .dropdown-item { color: #666; padding: 5px; } .dropdown-item:hover { background-color: #f2f2f2; }
粉丝
0
关注
0
收藏
0