Question

请不要jquery

我有以下菜单，其中class = menu-list，我希望在悬停嵌套/子项目时，将背景颜色更改为父li元素的白色

代码和工作演示：

＆＃13;

   nav .menu-list{
        background: white;
        position: absolute;
        margin-top: 60px;
        padding: 12px 0;
        display: none;
        width: 68vw;
        height: 100vh;

    }

    nav .menu-list li{
        background: white;
        display: block;
        color: #000000;
        position: relative;
        padding: 0;
        border-left: 24px white solid;
    }

    nav .menu-list li:hover{
        background: #eee;
        border-left: 24px #eee solid;
    }

    nav ul li:focus {
        background: white;
    }

    nav ul li:focus ul {
        display: block;
        position: relative;
        left: 0;
        margin-left: -24px;
    }

    nav ul li ul li:hover  {
        background: white;
    }

＆＃13;

<nav>
  <ul class="menu-list" style="display: block;">
    <li tabindex="1" onclick="location.href='#/work'; dimScreen()">Work</li>
    <li tabindex="2" onclick="dimScreen()">About
      <ul>
        <li onclick="location.href='#/about/what-we-do'">What we do</li>
        <li onclick="location.href='#/about/how-we-work'">How we work</li>
        <li onclick="location.href='#/about/leadership'">Leadership</li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Lame paint截图更好地解释：

Answer 1

首先，你can't do this with CSS。 CSS没有关于它的父元素的概念。

对于javascript，您可以使用鼠标事件。这是an example：

var parentOn = function(e) {
    e.target.parentNode.style.backgroundColor = '#9d7';
}
var parentOff = function(e) {
    e.target.parentNode.style.backgroundColor = '#97a';
}

var children = document.querySelectorAll('.child');    
for (var x = 0; x < children.length; x ++) {
    children[x].addEventListener('mouseover', parentOn);
    children[x].addEventListener('mouseout', parentOff);
};

有几点需要注意：

任何JavaScript DOM查询都将返回一个节点数组，因此您必须对它们进行迭代以避免错误。 JQuery很好地隐藏了它，因此它可能会令人困惑。
mouseenter和mouseleave组合与mouseover和mouseout不同，你可以find out more here
了解如何使用JavaScript添加和删除类比使用内联样式更好。 This answer will help。你将能够重复使用这些样式并且它更容易维护 - 我创建了一个实用程序函数来处理这个问题，比如JQuery的addClass()。
使用命名函数变量比匿名函数更清晰，更易于重用。

https://jsfiddle.net/chwbuvum/6/

Answer 2

这是一个纯CSS解决方案

正如Tony Leigh指出的那样，你不能使用纯CSS做完全你所要求的，但你可以让它像你想要的那样看起来

CSS中更改的行在代码段中进行了注释，HTML中的主要更改是在顶级列表元素中添加了span标记。

主要想法是每个顶级li保持白色，而封闭的span在悬停时变为灰色。这样，将鼠标悬停在子列表上并不会改变父li的颜色。

代码段

＆＃13;

    nav .menu-list{
        background: white;
        position: absolute;
        margin-top: 60px;
        padding: 12px 0;
        display: none;
        width: 68vw;
        height: 100vh;

    }

    nav .menu-list li{
        background: white;
        display: block;
        color: #000000;
        position: relative;
        padding: 0;
        /* changed from border to background color
        border-left: 24px white solid;
        */
        padding-left:24px; /* added to put back the "border-left" area */
    }

    nav .menu-list li:hover{
        background: white; /*changed from #eee to white */
        /* changed from border to background color
        border-left: 24px #eee solid;
        */
    }

    /* start added blocks */
    nav .menu-list li span {
        width: 100%;
        display:block;
        position:relative;
        left:-24px;
        padding-left:24px;
    }

    nav .menu-list li span:hover{
        background: #eee;
    }
    /* end added blocks */

    nav ul li:focus {
        background: white;
    }

    nav ul li:focus ul {
        display: block;
        position: relative;
        left: 0;
        margin-left: -24px;
    }

    nav .menu-list li ul li:hover  {
        background: #eee;
    }

＆＃13;

<nav>
  <ul class="menu-list" style="display: block;">
    <li tabindex="1" onclick="location.href='#/work'; dimScreen()"><span>Work</span></li>
    <li tabindex="2" onclick="dimScreen()"><span>About</span>
      <ul>
        <li onclick="location.href='#/about/what-we-do'">What we do</li>
        <li onclick="location.href='#/about/how-we-work'">How we work</li>
        <li onclick="location.href='#/about/leadership'">Leadership</li>
      </ul>
    </li>
  </ul>
</nav>

＆＃13;

Answer 3

以下是基于代码的解决方案：

<强> JS

var listElements = document.getElementsByClassName('submenu');
for (var i = 0; i < listElements.length; i++) {
    listElements[i].addEventListener("mouseenter", function(evt) {   
        evt.target.parentNode.style.background = "red";
    });
    listElements[i].addEventListener("mouseleave", function(evt) {   
        evt.target.parentNode.style.background = "black";
    });
}

HTML更改

<ul class="menu-list" style="display: block;">
  <li tabindex="1" onclick="location.href='#/work'; dimScreen()">Work</li>
  <li tabindex="2" onclick="dimScreen()">About
    <ul class='submenu'>
      <li onclick="location.href='#/about/what-we-do'">What we do</li>
      <li onclick="location.href='#/about/how-we-work'">How we work</li>
      <li onclick="location.href='#/about/leadership'">Leadership</li>
    </ul>
  </li>
</ul>

正如您所看到的，对于您将拥有的每个子菜单，我添加了一个额外的submenu类来区分主菜单和子菜单。当您离开每个元素时，它会将父级的背景更改为黑色。当您输入时，它会根据mouseenter和mouseleave事件将其更改为红色。

它的作用是找到父节点，然后操纵该元素的样式。

Answer 4

感谢大家的尝试，但我只需要添加它以使其正常工作

  .menu-list li:hover {
        background: #eee;
    }

    .menu-list li:focus {
        background: white;
    }

在孩子<ul> <li>的悬停时，父<ul> <li>元素的元素更改样式

4 个答案: