Interne CSS-Funktion funktioniert nicht

Question

Ich habe dieses Codebeispiel für eine drop down list. Ich möchte die Schweben Farbe ändern, wenn ich über den Namen schweben Our Softwares (die unter der Klasse dropdown-toggle)

Hier ist der Code Beispiel:

    <li class="dropdown" > 
         <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;" >Our Softwares<span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Software 1</a></li> 
          <li><a href="#">Software 2</a></li> 
          <li><a href="#">Software 3</a></li> 

         </ul> 
        </li> 

Und hier ist der interne CSS ich die oben genannten zu erreichen verwendet Funktion:

.dropdown .dropdown-toggle a:hover{ 
      background-color: red; 
      color: blue; 
     } 

Aber es funktioniert nicht. Kann mir bitte jemand sagen, was mache ich falsch?

Answer 1

Sie müssen nur die a vor der Klasse .dropdown-toggle als die Klasse für die a statt ein Element, das es enthält.

Ich fügte auch !important zu der Farbe hinzu, weil es in der Inline-CSS als weiß deklariert ist (was Priorität hat).

.dropdown a.dropdown-toggle:hover { 
    background-color: red; 
    color: blue!important; 
} 

Sie können es hier testen:

.dropdown a.dropdown-toggle:hover { 
 
    background-color: red; 
 
    color: blue!important; 
 
}

<li class="dropdown"> 
 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" style="color:white;">Our Softwares<span class="caret"></span></a> 
 
    <ul class="dropdown-menu"> 
 
    <li><a href="#">Software 1</a></li> 
 
    <li><a href="#">Software 2</a></li> 
 
    <li><a href="#">Software 3</a></li> 
 

 
    </ul> 
 
</li>