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

Popular posts from this blog

javascript - Clear button on addentry page doesn't work -

c# - Selenium Authentication Popup preventing driver close or quit -

tensorflow when input_data MNIST_data , zlib.error: Error -3 while decompressing: invalid block type -