"child"元素的 .prepend 和 .append "parent"元素的悬停颜色

我正在处理这个菜单运行代码片段:)

我的问题是我不能得到下拉箭头:悬停颜色的工作，因为我想要的。前女友。如果我将鼠标悬停在->关卡1b ->关卡1b 2b ->关卡1b 2b 3b然后"level 1b"，"level 1b 2b"上的箭头应该是白色的，其余的应该是黑色的

有人能帮帮我吗

https://jsfiddle.net/BugiBH/xLumg78x/

/* 
 * add theme-features
 */
jQuery(document).ready(function ($) {
    $('a[target="_blank"]').addClass("target-blank");
    $('.top-nav  a, .main-navigation  a').prepend("<div id='before' style='float: left;'></div>");
    $('.top-nav  a, .main-navigation  a').append("<div id='after' style='float: right;'></div>");
});

nav {
    background: blue;
    margin-top 5px;
}
/*Menu placering*/
 #site-nav-container {
    text-align: center;
}
#site-nav-container, #site-nav-container ul {
    z-index: 10;
}
#site-navigation {
    display: inline-block;
}
#site-navigation li {
    line-height: 1;
    text-align: left;
}
/*hover*/
 .main-navigation ul li:hover, .main-navigation ul li.current-menu-item, .main-navigation ul li.current-page-ancestor {
    border-top: 2px solid white;
}
.main-navigation ul ul li:hover, .main-navigation ul ul li.current-menu-item, .main-navigation ul ul li.current-page-ancestor {
    border-top: 0px;
    border-left: 2px solid white;
}
.main-navigation ul li:hover #after, .main-navigation ul ul li:hover #after {
    color: white;
}
.main-navigation ul ul {
    display: none;
}
.main-navigation ul li:hover > ul {
    display: block;
}
/*level one*/
 .main-navigation ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: inline-table;
    position: relative;
}
.main-navigation ul li {
    float: left;
    border-top: 2px solid blue;
}
.main-navigation ul li a {
    display: block;
    margin: 5px 10px;
    color: black;
    text-decoration: none;
    /*inline-box-align: initial;*/
    white-space: nowrap;
}
.main-navigation .menu-item-has-children > a #after:after {
    font-family: FontAwesome;
    content:" f13a";
    padding-left: 5px;
}
.main-navigation #target-blank {
    display: flex;
}
/*level two*/
 .main-navigation ul ul {
    background: blue;
    position: absolute;
    top: 100%;
}
.main-navigation ul ul li {
    float: none;
    position: relative;
    border-left: 2px solid blue;
    margin-left: 5px;
    border-top: 0px;
}
.main-navigation ul ul li a {
    color: black;
    margin: 0;
    padding: 5px;
    padding-left: 3px;
}
.main-navigation ul li .menu-item-has-children > a #after:after {
    font-family: FontAwesome;
    content:" f138";
}
/*level higher than two*/
 .main-navigation ul ul ul {
    position: absolute;
    left: 100%;
    top:0;
}
.target-blank:after {
    font-family: FontAwesome;
    content:" f08e ";
    font-size: 70%;
    color: white;
    padding-left: 5px;
}
.top-nav #target-blank {
    display: flex;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-top-menu-container">
        <ul id="primary-menu" class="menu">
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1729"> <a target="_blank" href="#" class="target-blank">Level 1a</a>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1733"> <a href="#">Level 1b</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1765"> <a target="_blank" href="#" class="target-blank">Level 1b 2a</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1766"> <a target="_blank" href="#" class="target-blank">Level 1b 2a 3a</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1730"> <a target="_blank" href="#" class="target-blank">Level 1b 2b</a>
                        <ul class="sub-menu">
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1751"> <a target="_blank" href="#" class="target-blank">Level 1b 2b 3a</a>
                            </li>
                            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1753"> <a target="_blank" href="#" class="target-blank">Level 1b 2b 3b</a>
                            </li>
                        </ul>
                    </li>
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1762">
                        <a target="_blank" href="#" class="target-blank">Level 1b 2c</a>
                    </li>
                </ul>
            </li>
            <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1728"> <a target="_blank" href="#" class="target-blank">Level 1c</a>
                <ul class="sub-menu">
                    <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1732"> <a target="_blank" href="#" class="target-blank">level 1c 1a </a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

您错过了父选择器(>)，因此将第一个li悬停，将使导航中的每个#after都接受更改。

删除当前关于li:hover的CSS，并添加以下1-liner:

#primary-menu > li:hover > a > #after, #primary-menu > li > ul > li:hover > a > #after  {
    color: white;
}

JS小提琴

#primary-menu > li

select all

s中父元素为id为#primary-menu 的元素

#primary-menu > li:hover > a > #after { /*somecss*/ }

选择所有ID为#after且父元素< a >和父元素< li >的元素:hover(仅当THIS li被悬停时应用/*somecss*/)

进一步参考请查看CSS选择器

更新一些Css和它的工作为我

.main-navigation ul > li:hover #after{
    color: white;
}
.main-navigation ul > li:hover .sub-menu #after{
    color: black;
}
.main-navigation ul > li:hover .sub-menu li:hover #after{
    color: white;
}
.main-navigation ul ul {
    display: none;
}

相关内容

最新更新

热门标签：