如何在 div 下拉菜单中悬停时更改背景颜色
[英]How do I get the background colour to change upon hover in a div dropdown
问题描述
我一直在尝试使颜色填充相对于您悬停的文本的整个下拉列表，但它没有填充整个 div 元素，仅填充单词周围的空间。
我创建了一个 Fiddle 来显示我遇到的问题。 我是 CSS 和 HTML 的初学者。
如您所见，我尝试添加填充，但是当您将其悬停时它没有填充 div 元素。
HTML 在下面提供，也在小提琴中
header { display: flex; justify-content: space-evenly; align-items: center; padding-top: 1.0rem; } .sub-1 { display: none; } .sub-1 ul { display: flex; flex-direction: column; gap: 2rem; padding-right: 4rem; padding-left: 1rem; margin-left: -9.5rem; height: 27.5rem; font-size: 1.6rem; background-color: white; list-style: none; } .sneakers { margin-top: 2rem; } .sub-1 a:link, .sub-1 a:visited { color: black; text-decoration: none; } .sub-1 a:hover { padding: 10px; background-color: blue; } li:hover .sub-1 { display: block; position: absolute; margin-left: -2rem; box-shadow: 1px 1px 10px grey; } .search-txt { border: none; outline: none; padding-top: 1.0rem; padding-left: 1.0rem; font-size: 1.5rem; color: black; } .search-nav { display: flex; font-size: 1.6rem; list-style: none; gap: 2.0rem; margin-left: -7.0rem; margin-top: -0.5rem; caret-color: transparent; }
<header class="header"> <body> <div class="navbar"> <ul class="search-nav"> <li><a class="main-nav-link" href="#browse">Browse</a> <div class="sub-1"> <ul class=""> <li class="sneakers"><a href="#">Sneakers</a> </li> <li><a href="#">Apparel</a></li> <li><a href="#">Electronics</a></li> <li><a href="#">Trading Cards</a></li> <li><a href="#">Collectibles</a></li> <li><a href="#">Accessories</a></li> <li><a href="#">NFTs</a></li> </ul> </div> </li> <li><a class="main-nav-link" href="#news">News</a></li> <li><a class="main-nav-link" href="#help">About</a> </li> <li><a class="main-nav-link" href="#account">My Account</a></li> <li><a class="main-nav-link sell" href="#sell">Sell</a></li> </ul> </div> </header>
1 个解决方案
解决方案1
-1 2022-05-13 22:46:57
如果我理解正确，则不需要带有 sub-1 类的包装器 div。 如果您删除该 div 并将该类添加到它下面的 ul
<li><a class="main-nav-link" href="#browse">Browse</a>
<ul class="sub-1">
<li class="sneakers"><a href="#">Sneakers</a>
</li>
<li><a href="#">Apparel</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Trading Cards</a></li>
<li><a href="#">Collectibles</a></li>
<li><a href="#">Accessories</a></li>
<li><a href="#">NFTs</a></li>
</ul>
然后在你的css中添加一个背景色
li:hover > .sub-1{
display: block;
position: absolute;
margin-left: -2rem;
box-shadow: 1px 1px 10px grey;
background: red;
}
我希望这会有所帮助，干杯！
我如何 hover 更改汉堡菜单颜色，单击汉堡菜单将其转换为 x 并显示内容下拉菜单？
[英]How do I hover to change the hamburger menu colour, click the hamburger menu to transform it to x and have the contents dropdown?
悬停时如何更改嵌套列表的单个列表项的背景颜色（以及整个菜单宽度）
[英]How to change background colour of individual list items of a nested list upon hover (and to full menu width)
如何更改 hover 背景和单击 Bootstrap Vue 下拉项的背景？
[英]How do I change the hover background and the background on click on a Bootstrap Vue dropdown item?
在javascript中的子悬停时更改父div的背景颜色？
[英]Change background colour of parent div on child hover in javascript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.