如何在 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.