如何在悬停时更改列表中的下拉列表颜色？

Question

我在我的网页中有这个列表，但是当我将其悬停时，我需要为我的下拉红色着色，当我在下拉列表中时保持红色。

＆＃13;

＆＃13;

.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 a {
    text-align: left;
}
    
.dropdown-link {
    padding: 5px;
    text-decoration: underline;
}
    
 .dropdown-link:hover .drop {
    background-color: #3e8e41;
 }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

这样做

li:hover .dropdown-content {
  display: block;
}

li:hover div > a {
  background-color: #d60041;
}

>代表direct descendent of the parent element 如果您将其删除，则所有a链接都会在悬停时获得background-color。

＆＃13;

＆＃13;

.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 > a {
  background-color: #d60041;
}

.dropdown a:hover {
    background-color: #d60041;
}

.dropdown-content a {
    text-align: left;
}

.dropdown-link {
    padding: 5px;
    text-decoration: underline;
}

.dropdown-link:hover .drop {
    background-color: #3e8e41;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;