Question

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

我现在需要做的是为这些应用悬停状态，使每个灰色的背景悬停。我现在肯定在哪里：悬停应该放在我在下面提供的代码中。

例如，我将背景设置为背景颜色：悬停时＃3498db我希望它变为灰色。

感谢。

len()

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

2 个答案: