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> 

我想要实现的是，当我将鼠标悬停在红色块上时，我试图使父元素（'What's New'）以＃000颜色和背景白色显示；

查看此图像<-

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

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> 

Answer 2

参见编辑后的jQuery。 这就是我的改变。 将无背景更改为透明，并添加颜色CSS样式。

这就是你想要的吗？

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

 .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>