如果列表项打开/悬停，则父链接必须具有不同的颜色

Posted 2023-05-08

【中文标题】如果列表项打开/悬停，则父链接必须具有不同的颜色

【英文标题】：If list item is opened/hovered, the parent link has to have a different color

【发布时间】：2012-09-28 19:10:01

【问题描述】：

我想创建一个效果，如下所示：如果我将鼠标悬停在我的下拉菜单上，链接是蓝色的。当然很好，但是如果我将任何列表项悬停在下拉菜单中，蓝色链接将变回灰色。即使悬停了其他东西，如何使链接保持蓝色？

所以这是normal 状态。没有悬停，没有任何东西。它是灰色的，这很好。如果我将鼠标悬停在常见问题解答中，它会变成蓝色。那也可以……但是现在。如果我将鼠标悬停在常见问题解答上，我将获得一个下拉列表。然后，如果我将鼠标悬停在列表项上，蓝色的常见问题解答消息将获得GREY。我希望它保留BLUE。

如前所述.. 我想获得蓝色的常见问题解答。我猜这与父类或活动状态有关？我怎样才能做到这一点？这是我的代码：

<div id="main-menu-wrap">
<ul id="menu-headmenu" class="menu-headmenu-container">
<li id="menu-item-429" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blabla">
About us
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-435" class="menu-item menu-item-type-post_type menu-item-object-page">
<a href="blablbala">
faq
<span class="sub">blablabla</span>
</a>
</li>
<li id="menu-item-145" class="menu-item menu-item-type-taxonomy menu-item-object-category">
<a href="blablabla">
no
<span class="sub">hahaa</span>
</a>
</li>
</ul>
</li>
<li id="menu-item-407" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor">
<a href="blablablabla">
blablbala
<span class="sub"></span>
</a>
<ul class="sub-menu">
<li id="menu-item-5" class="menu-item menu-item-type-custom menu-item-object-custom">
</ul>
</div>

CSS：

#main-menu-wrap 
    position: absolute;
    top: 150px;
    z-index: 9999;


#menu-headmenu li .sub-menu 
    border-top: 15px solid #80806E;
    display: none;
    position: absolute;
    z-index: 9999;

.home #menu-headmenu li a:hover 
    background: none repeat scroll 0 0 black;
    color: #1CBBED;

.home #menu-headmenu li li a:hover 
    background: none repeat scroll 0 0 transparent;

#menu-headmenu li a:hover 
    background: none repeat scroll 0 0 #80806E;
    color: white;

#menu-headmenu li li a:hover 
    background: none repeat scroll 0 0 transparent;

#menu-headmenu li:hover .sub-menu 
    display: block;

【参考方案1】：

根据您的代码，替换此规则：

#menu-headmenu li a:hover 
    background: none repeat scroll 0 0 #80806E;
    color: white;

与：

#menu-headmenu li a:hover, #menu-headmenu li:hover a 
    background: none repeat scroll 0 0 #80806E;
    color: white;

Demo

【讨论】：

编辑：是的，发生了一些事情，但话又说回来：现在所有列表元素都有相同的颜色。我只是想给常见问题一个不同的颜色。

@user1717526 让我明白...第一个链接在链接和子菜单悬停时必须是蓝色的？

是的，没错。悬停时和悬停子菜单项/菜单时，常见问题解答必须为蓝色。

@user1717526 好的，但是您的小提琴中没有常见问题解答。看看“关于我们”会发生什么。它可以工作，所以如果它不在您的实时代码中，则可能正在发生其他事情......

看我给的图片：有一个FAQ。我看到关于我们的作品，它也可以@我的网站，但是，现在所有的链接都与关于我们的颜色相同。我只希望它发生在常见问题解答中，而不是所有链接。所以它有效，但部分......

【参考方案2】：

不要将 :hover 放在链接上，而是将其放在列表项上。例如：

.home #menu-headmenu li:hover ...

【讨论】：

color: white; 也需要悬停在 a 元素上

你是对的。 a 应该在那里，就像上面的答案一样。

【参考方案3】：

你可以使用这个css代码来处理这个问题：

.menu-item:hover a:first-child

    background: #80806E;
    color:#fff;
    text-decoration:none;

最好的问候

【讨论】：

谢谢，但这使得所有列表中的项目都具有不同的颜色。我只是想给常见问题一个不同的颜色。