css 伪 class 上的悬停状态

Question

我有一个包含 4 个 headers 的子菜单。下面的代码为子菜单的每一列的第一个元素设置样式。

我现在需要做的是为这些应用悬停状态，使悬停时每个灰色的背景。我现在确定 :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;
}

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>

css 伪 class 上的悬停状态

Hover state on css pseudo class

html

css

class

selector