css伪类上的悬停状态答案

【问题标题】：Hover state on css pseudo classcss伪类上的悬停状态
【发布时间】：2016-01-20 16:52:39
【问题描述】：

我有一个带有 4 个标题的子菜单。下面的代码设置子菜单每一列的第一个元素的样式。

我现在需要做的是为这些应用悬停状态，使悬停时每个灰色的背景。现在我确定 :hover 应该放在我在下面提供的代码中的位置。

例如，我在悬停时将背景设置为 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;
}

【问题讨论】：

需要查看您的 HTML 吗？

标签： html css class selector

【解决方案1】：

按如下方式操作：

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

【讨论】：

【解决方案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>

【讨论】：