在CSS僞類上懸停狀態

我有一個包含4個標題的子菜單。下面的代碼設置子菜單每列的第一個元素。在CSS僞類上懸停狀態

我現在需要做的是對這些應用懸停狀態，使懸停時每個灰色的背景。我現在確定：在下面提供的代碼中，懸停應該放在哪裏。

因此，例如，我將背景設置爲background-color：＃3498db懸停，我希望它變成灰色。

謝謝。

#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; 
}

來源

2016-01-20 jord49

需要看你的HTML？ –

這樣做如下：

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

來源

2016-01-20 08:43:59 Raevenk

你可能可以試試這個：

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

來源

2016-01-20 08:44:08

在CSS僞類上懸停狀態

回答

相關問題