我需要设置哪个 class 样式？

Question

这是 JSFiddle：https://jsfiddle.net/4sesoafo/10/

我有这个菜单，我正在尝试设计它的样式。一切都已完成，除了我需要 "ABOUT" 在菜单悬停时也变成蓝色。目前，当您悬停菜单然后悬停其子项时，"ABOUT" 保持白色并且不可见。

有 css 大师可以帮助我吗？

谢谢！

纪尧姆

编辑：

正常状态: 我现在拥有的： 我想要的： 我不想要的:

ps: 这是 JSFiddle 的 html 代码，因为我需要把它放在这里。

<div class="test">

<nav class="primary-nav" id="nav-wrap">
                    <div class="sf-menu">
          <ul>
            <li class="page_item page-item-8 page_item_has_children"><a href="">About</a>
              <ul class="children">
                <li class="page_item page-item-16"><a href="">History / Mission / Vision</a></li>
                <li class="page_item page-item-1372"><a href="">Meet The Team</a></li>
                <li class="page_item page-item-1011"><a href="">Our Expertise</a></li>
                <li class="page_item page-item-20"><a href="">Our Clients</a></li>
                <li class="page_item page-item-21"><a href="">Our Partners</a></li>
                <li class="page_item page-item-22"><a href="">Careers</a></li>
                <li class="page_item page-item-507"><a href="">Case Studies</a></li>
              </ul>
            </li>
          </ul>
          </div>    
</nav>
</div>

Answer 1

.sf-menu ul:hover .page_item_has_children > a{
  color: blue;
}

当 UL 悬停在上方时，header 会应用蓝色。

编辑。假设您希望 "About" 菜单在悬停时显示蓝色 header，而 "Products" 菜单在悬停时显示红色 header，您可以执行以下操作。

为您要更改的每个项目添加一个 ID。在您的情况下，它将是菜单 header 的 A 标签（我也为此示例添加了“产品 header”）

首先为菜单本身添加一个 id 到 UL

<ul id="about-menu">

<ul id="products-menu">

然后

<li class="page_item page-item-8 page_item_has_children"><a href="" id="about-header">About</a>

<li class="page_item page-item-9 page_item_has_children"><a href="" id="products-header">Products</a>

现在我之前提到的 CSS 会将蓝色应用于两者。

为了区别对待每个 header，您需要告诉 CSS 区别对待它们。在我最初的 CSS 中，没有什么可以区分相似的链接，但现在我们已经给每个链接一个 ID。因此，我们可以执行以下操作。

.sf-menu ul#about-menu:hover .page_item_has_children > a#about-header{
  color: blue;
}
.sf-menu ul#products-menu:hover .page_item_has_children > a#products-header{
  color: red;
}

如果您真的想要，您现在也可以去掉一些 css 选择器。我不会，但这取决于你 - 它不会在一天结束时产生影响。

ul#about-menu:hover a#about-header{
  color: blue;
}
ul#products-menu:hover a#products-header{
  color: red;
}

希望对您有所帮助

Answer 2

您只需将 id 添加到 a 标签并将此代码放入 css:

#about:hover{
  color: blue !important;
}

LINK to jsfiddle

我需要设置哪个 class 样式？

which class do I need to style?

html

css

hover