html - css伪类上的悬停状态

Question

我有一个包含 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;
}

Answer 1

按如下方式操作:

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