悬停菜单项时放置背景

Question

悬停菜单时，我想创建background-color或background-image 。

这是我的代码的一部分。 因此，当我将鼠标悬停在C项上时，背景颜色会在没有jQuery的子菜单后面更改。

 @import "fonts.css"; body { color: #fff; margin: 0px; } .dropdownmenu{ height: 72px; background: #ec008c; } .dropdownmenu ul, .dropdownmenu li { margin: 0; padding: 0; } .dropdownmenu ul { background: gray; list-style: none; width: 100%; } .dropdownmenu li { float: left; position: relative; width:auto; } .dropdownmenu a { color: #FFFFFF; display: block; padding: 24px 24px; font-size: 21px; text-align: center; text-decoration: none; } .menu:hover a { background: #fff; color: #ec008c; } #submenu { left: 0; opacity: 0; position: absolute; top: 72px; visibility: hidden; z-index: 1; width: 235px; } li:hover ul#submenu { opacity: 1; visibility: visible; } #submenu li { float: none; width: 100%; } #submenu a:hover { background: #EEEEEE; color:#ec008c; } #submenu a { background-color:#fff; font-size: 16px; font-family: "Galaxie"; padding: 20px 24px 18px; text-align: left; color: #000; } #main{ -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center fixed; width:100%; height:640px; background-color:#000; } 

 <nav class="dropdownmenu"> <ul> <li><a href="#"></a></li> <li class="menu"><a href="#">Item A</a></li> <li class="menu"><a href="#">Item B</a></li> <li class="menu"><a href="#">Item C</a> <ul id="submenu"> <li><a href="#">Sub Item</a></li> <li><a href="#">Sub Item</a></li> </ul> </li> <li class="menu"><a href="#">Item D</a></li> <li class="menu"><a href="#">Item E</a></li> </ul> </nav> <div id="main"></div> 

解

function chbg(mask) {
    document.getElementById('main').style.boxShadow = mask;
}



<li  id="a" onmouseover="chbg('inset 0 0 0 1000px rgba(255,0,0,.2)')" onmouseout="chbg('none')" class="menu"><a href="#">ItemC</a></li>

Answer 1

您要问的是单纯使用CSS不可能实现的。 因为#main没有嵌套/的兄弟#submenu ，你无法选择它。 您能得到的最接近的是

.dropdownmenu:hover ~ #main 
{
    background-color:#cc0000;
}

使用一些JavaScript来应用更改背景颜色的类。

Answer 2

正如其他人所说，您无法选择带有纯CSS的父节点。 因此，您将不得不使用JavaScript。 我在示例中使用了jQuery，但是，如果您愿意，我可以使用纯JavaScript。

 $(function() { var menubar = $("nav.dropdownmenu"); $("li", menubar).on("hover", function() { menubar.toggleClass("active"); }); }); 

 @import "fonts.css"; body { color: #fff; margin: 0px; } .dropdownmenu { height: 72px; background: #ec008c; } .dropdownmenu.active { background: #000000; } .dropdownmenu ul, .dropdownmenu li { margin: 0; padding: 0; } .dropdownmenu ul { background: gray; list-style: none; width: 100%; } .dropdownmenu li { float: left; position: relative; width: auto; } .dropdownmenu a { color: #FFFFFF; display: block; padding: 24px 24px; font-size: 21px; text-align: center; text-decoration: none; } .menu:hover a { background: #fff; color: #ec008c; } #submenu { left: 0; opacity: 0; position: absolute; top: 72px; visibility: hidden; z-index: 1; width: 235px; } li:hover ul#submenu { opacity: 1; visibility: visible; } #submenu li { float: none; width: 100%; } #submenu a:hover { background: #EEEEEE; color: #ec008c; } #submenu a { background-color: #fff; font-size: 16px; font-family: "Galaxie"; padding: 20px 24px 18px; text-align: left; color: #000; } #main { -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-repeat: no-repeat; background-position: center center fixed; width: 100%; height: 640px; background-color: #000; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <nav class="dropdownmenu"> <ul> <li> <a href="#"></a> </li> <li class="menu"><a href="#">Item A</a> </li> <li class="menu"><a href="#">Item B</a> </li> <li class="menu"><a href="#">Item C</a> <ul id="submenu"> <li><a href="#">Sub Item</a> </li> <li><a href="#">Sub Item</a> </li> </ul> </li> <li class="menu"><a href="#">Item D</a> </li> <li class="menu"><a href="#">Item E</a> </li> </ul> </nav> <div id="main"></div> 

我希望这可以帮助你。