悬停菜单项时放置背景答案

【问题标题】：Put a background when hover a menu item悬停菜单项时放置背景
【发布时间】：2019-05-27 10:37:57
【问题描述】：

我想在悬停菜单时创建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>

【问题讨论】：

这不是已经发生的事情吗？悬停会将背景颜色更改为白色。
是的，但是当我将鼠标悬停在 C 项时，我想将 div #main 的背景颜色更改为黑色。
使用纯 css 无法完成，因为#main 在 nav 之外，无法访问

标签： html css

【解决方案1】：

您所问的问题仅靠 CSS 是不可能实现的。因为#main 没有与#submenu 的同级嵌套，所以您不能选择它。你能得到的最接近的是

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

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

【讨论】：

【解决方案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>

希望对你有帮助。

【讨论】：