css - 悬停主菜单 li + a

Question

我正在这个网站的菜单中工作 WebSite , 但我有一个问题。

我需要在悬停主菜单时，将这个标签“a”设置为其他颜色。

html代码:

<ul id="menu-main-menu" class="menu">
    <li id="menu-item-159" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-159"><a href="http://jesusbwebdesigner.com/staging_sdv/">Home</a></li> 
    <li id="menu-item-160" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-160"><a href="http://jesusbwebdesigner.com/staging_sdv/historia/">Quiénes Somos</a>
        <ul class="sub-menu">
            <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161"><a href="http://jesusbwebdesigner.com/staging_sdv/historia/">Historia</a></li>
            <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-162"><a href="http://jesusbwebdesigner.com/staging_sdv/mision/">Misión</a></li>
            <li id="menu-item-163" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-163"><a href="http://jesusbwebdesigner.com/staging_sdv/vision/">Visión</a></li>
            <li id="menu-item-164" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-164"><a href="http://jesusbwebdesigner.com/staging_sdv/sistema-integrado-gestion/">Sistema Integrado Gestión</a></li>
            <li id="menu-item-165" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-165"><a href="http://jesusbwebdesigner.com/staging_sdv/politicas/">Políticas de Gestión</a></li>
        </ul>
    </li>
<ul>

这是我的 CSS 代码，但无法正常工作:

.mainMenu .menu li.menu-item:hover + a{
    color: red !important;
}

请帮忙。

Answer 1

正确的做法是:

.mainMenu .menu li.menu-item > a:hover {
    color: red;
}

如果您只想设置子菜单中链接的样式，请执行以下操作:

.mainMenu .menu li.menu-item ul li a:hover {
    color: red;
}

如果你想悬停在 li 上:

.mainMenu .menu > li.menu-item:hover > a {
    color: red;
}