在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伪类上悬停状态

回答

相关问题