Question

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

我正在尝试这个菜单。一切都已完成，除了当菜单悬停时我需要“关于”变成蓝色。目前，当您将鼠标悬停在菜单上然后将其悬停时，“关于”会保持白色并且不可见。

任何可以帮助我的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悬停在UL上时，这会将蓝色应用于标题。

编辑。假设您希望“关于”菜单在悬停时有一个蓝色标题，而“产品”菜单在悬停时有一个红色标题，您可以执行以下操作。

为要更改的每个项目添加ID。在你的情况下，它将是菜单标题的A标记（我已经为此示例添加了“Products标题”）

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

<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会将蓝色应用于两者。

为了区别对待每个标头，您需要告诉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

哪个班级需要风格？

2 个答案: