Состояние наведения на css псевдокласс

Question

У меня есть подменю с 4 заголовками. Приведенный ниже код стилирует первый элемент каждого столбца подменю.

Теперь я должен применить для этого состояние зависания, делая фон каждого серого цвета зависающим. Теперь я уверен, где: наведите курсор на код, который я привел ниже.

Так, например, если у меня есть фон, заданный для фона: # 3498db on hover Я хочу, чтобы это стало серым.

Спасибо.

#ms-topmenu .row > div:nth-child(2) a:nth-child(1){ 
    background-color:#3498db; 
    padding:5px; 
    color:white; 
} 

#ms-topmenu .row > div:nth-child(3) a:nth-child(1){ 
    background-color:#2ecc71; 
    padding:5px; 
    color:white; 
} 

#ms-topmenu .row > div:nth-child(4) a:nth-child(1){ 
    background-color:#9b59b6; 
    padding:5px; 
    color:white; 
} 

#ms-topmenu .row > div:nth-child(5) a:nth-child(1){ 
    background-color:#e67e22; 
    padding:5px; 
    color:white; 
} 

Answer 1

сделать это следующим образом:

#ms-topmenu .row > div:nth-child(2) a:nth-child(1):hover { 
    background: grey; 
} 

Answer 2

Вы можете можете попробовать это:

#ms-topmenu .row > div:nth-child(2) a:nth-child(1){ 
 
    background-color:#3498db; 
 
    padding:5px; 
 
    color:white; 
 
} 
 

 
#ms-topmenu .row > div:nth-child(3) a:nth-child(1){ 
 
    background-color:#2ecc71; 
 
    padding:5px; 
 
    color:white; 
 
} 
 

 
#ms-topmenu .row > div:nth-child(4) a:nth-child(1){ 
 
    background-color:#9b59b6; 
 
    padding:5px; 
 
    color:white; 
 
} 
 

 
#ms-topmenu .row > div:nth-child(5) a:nth-child(1){ 
 
    background-color:#e67e22; 
 
    padding:5px; 
 
    color:white; 
 
} 
 

 
#ms-topmenu .row > div a:hover { 
 
    background-color : #AAA !important; 
 
} 
 

 
/* This code is only for make the example looks better */ 
 
#ms-topmenu .row > div { 
 
    display : inline-block; 
 
}

<div id="ms-topmenu"> 
 
    <div class="row"> 
 
     <div> 
 
      <a href="#">Say Hello</a> 
 
     </div> 
 
     <div> 
 
      <a href="#">Say Hello</a> 
 
     </div> 
 
     <div> 
 
      <a href="#">Say Hello</a> 
 
     </div> 
 
     <div> 
 
      <a href="#">Say Hello</a> 
 
     </div> 
 
    </div> 
 
</div>