jquery - How can I change the color of my dropdown inside a list on hover? -
i have list inside webpage, need color dropdown red when hover it, , keep red when inside dropdown list.
.dropdown-content { display: none; position: absolute; background-color: rgb(255, 255, 255); border: 0.5px solid black; border-radius: 2px; min-width: 113px; text-align: left; -webkit-box-shadow: rgba(0, 0, 0, 0.129412) 0px 2px 4px 0px; } .dropdown:hover .dropdown-content { display: block; } .dropdown a:hover { background-color: #d60041; } .dropdown-content { text-align: left; } .dropdown-link { padding: 5px; text-decoration: underline; } .dropdown-link:hover .drop { background-color: #3e8e41; }
<ul> <li class="textnavbar"> <div class="dropdown"> <a href="#" id="mybtn">il mio account</a> <div class="dropdown-content"> <ul> <a class="dropdown-link" href="#">link 1</a> <a class="dropdown-link" href="#">link 2</a> <a class="dropdown-link" href="#">link 3</a> </ul> </div> </div> </li> <li class="textnavbar"><a href="#">prime</a></li> <li class="textnavbar"><a href="#">carrello</a></li> </ul>
do this
li:hover .dropdown-content { display: block; } li:hover div > { background-color: #d60041; }
the >
stands direct descendent of parent element
if remove it, a
links background-color
on hover.
.dropdown-content { display: none; position: absolute; background-color: rgb(255, 255, 255); border: 0.5px solid black; border-radius: 2px; min-width: 113px; text-align: left; -webkit-box-shadow: rgba(0, 0, 0, 0.129412) 0px 2px 4px 0px; } li:hover .dropdown-content { display: block; } li:hover div > { background-color: #d60041; } .dropdown a:hover { background-color: #d60041; } .dropdown-content { text-align: left; } .dropdown-link { padding: 5px; text-decoration: underline; } .dropdown-link:hover .drop { background-color: #3e8e41; }
<ul> <li class="textnavbar"> <div class="dropdown"> <a href="#" id="mybtn">il mio account</a> <div class="dropdown-content"> <ul> <a class="dropdown-link" href="#">link 1</a> <a class="dropdown-link" href="#">link 2</a> <a class="dropdown-link" href="#">link 3</a> </ul> </div> </div> </li> <li class="textnavbar"><a href="#">prime</a></li> <li class="textnavbar"><a href="#">carrello</a></li> </ul>
Comments
Post a Comment