2016-01-20 184 views
0

我有一個包含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; 
} 
+0

需要看你的HTML? –

回答

0

這樣做如下:

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

你可能可以試試這個:

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