javascript - 影响父元素的 HTML/CSS 悬停 +Jquery

Question

我正在为一个元素测试我的导航栏，我正在使用基本的 Html/css并且我添加了 Jquery，以便悬停效果可以影响父元素。

$(document).ready(function () {
    $(".nav-level-2").hover(
  function () {
     $("li>a").css("background", "white");
  }
);
   $(".nav-level-2").mouseleave(
    function () {
     $("li>a").css("background", "none");
  });
  });

.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover + .nav-level-2{
    display: block;
  
} 

.nav-level-2:hover {
  display:block;
  
}


.row{
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;    
}

.list-container {
    padding: 0px;
}

.col-lg-2{
    flex-basis: 16.666666667%;
    max-width: 16.666666667%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 0;
    background: red;
    margin-left: 5px;
    
}

.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 14px;
    margin: 0 0 20px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<nav class="main-nav">
<div class="inner max-girdle-width">
                        <div class="nav-links-container">
                          <ul class="nav-links">
                            <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
  <div class="nav-level-2">
                                <div class="nav-level-2-container row max-girdle-width">
                                   <div class="list-container shop col-lg-2">
                                                   <h3 class="heading"> Shop by</h3> 
                                                    
                                   </div>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </nav>

我想要实现的是，当我将鼠标悬停在红色 block 上时，我试图让父元素('What's New')以颜色 #000 和背景白色显示；

SEE THIS IMAGE <--

我知道，当我将鼠标悬停在“新增功能”上时，它确实会将颜色更改为白色，但是当我将鼠标悬停在红 block 上进行导航时，背景会消失，“新增功能”也会消失，并带有黑色背景。

Answer 1

不需要 JavaScript 来做你想做的事。我想这就是你要找的？基本上，我在父 div 上使用 :hover 来更改子元素的背景和颜色。

.nav-whats-new:hover a {
   background:white;
   color:black;
}

例子:

.main-nav {
    background: #000;
    height: 30px;
    position: relative;
    overflow: visible;
    z-index: 2;
    width: 100%;
    left: 0;
    cursor: default;
}

.nav-whats-new:hover a {
   background:white;
   color:black;
}

.main-nav .inner{
    height: 100%;
}

.main-nav>.inner{
    text-align: justify;
}

.nav-links-container {
    position: static;
    /* background: red; */
    height: 100%;
    
}

.nav-links{
    padding: 0 0 0 3px;
    display: inline;
    margin-bottom: 20px;
    overflow: hidden;
     /*background-color: green; */
}

li {
    vertical-align: top;
    padding: 5px;
    display: inline-block;
    /* background: blue; */
}

li>a {
    color: #FFF;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 10px 9px 9px;
    margin: 0 -3px;
}
li>a:hover {
    background-color: white;
    color:#000;    
}

.nav-level-2 {
    display: none;
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: auto;
    border-bottom: 5px solid #000;
    background: red;
    text-align: left;

}

.nav-level-2-container {
    padding-top: 40px;
    padding-bottom: 40px;
    -ms-flex: 0px 1px auto;
    -webkit-box-flex: 0;
    -webkit-flex: 0px 1px auto;
    flex: 0px 1px auto;
}

li>a:hover + .nav-level-2{
    display: block;
  
} 

.nav-level-2:hover {
  display:block;
  
}


.row{
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;    
}

.list-container {
    padding: 0px;
}

.col-lg-2{
    flex-basis: 16.666666667%;
    max-width: 16.666666667%;
    box-sizing: border-box;
    display: flex;
    flex: 0 1 auto;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 0;
    background: red;
    margin-left: 5px;
    
}

.main-nav>.inner .nav-level-2 .nav-level-2-container .heading {
    text-transform: uppercase;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: 20px;
    font-size: 14px;
    margin: 0 0 20px;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<nav class="main-nav">
  <div class="inner max-girdle-width">
    <div class="nav-links-container">
      <ul class="nav-links">
        <li class="nav-whats-new"> <a class="nav-level-1" href="#">What's New</a>
          <div class="nav-level-2">
            <div class="nav-level-2-container row max-girdle-width">
              <div class="list-container shop col-lg-2">
                <h3 class="heading"> Shop by</h3>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>