如何在 div 下拉菜单中悬停时更改背景颜色
[英]How do I get the background colour to change upon hover in a div dropdown
问题描述
I have been trying to make the colour fill the entire dropdown relative to the text you are hovering but it is not filling the whole div element, only the space around the word.
我一直在尝试使颜色填充相对于您悬停的文本的整个下拉列表，但它没有填充整个 div 元素，仅填充单词周围的空间。
I have created a Fiddle to show the issue that I am having.我创建了一个 Fiddle 来显示我遇到的问题。 I'm a beginner in CSS and HTML.我是 CSS 和 HTML 的初学者。
As you can see I have tried to add padding but it is not filling the div element as you hover it.如您所见，我尝试添加填充，但是当您将其悬停时它没有填充 div 元素。
THE HTML is provided below and also within the Fiddle 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
if i understand correctly the wrapper div with the sub-1 class is unnecessary.如果我理解正确，则不需要带有 sub-1 类的包装器 div。 If you remove that div and add that class to the ul below it如果您删除该 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>
Then in your css add a background-color然后在你的css中添加一个背景色
li:hover > .sub-1{
display: block;
position: absolute;
margin-left: -2rem;
box-shadow: 1px 1px 10px grey;
background: red;
}
I hope this helps, cheers!我希望这会有所帮助，干杯！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.