css - 将鼠标悬停在子菜单(第二个 ul 元素)中的任何 li 元素上时，如何更改第一个 ul li 的颜色 - 只有两个 span 图标？

Question

我试图让我的第一个 ul li span i 类元素(在“a”元素之前和之后)中的两个图标的颜色改变颜色，但我似乎无法正确定位它们。

我已经设法让我的原始代码工作，方法是分别悬停每个 a/图标并更改它们的颜色，但我不想那样。当我将鼠标悬停在第二个(子菜单)li 元素内时，我只想更改父 li 图标的颜色，即只有其父 li 的子菜单事件应该更改图标的颜色

任何解释或学习正确定位的资源都将不胜感激。 只有纯 css 答案谢谢。

这是我的 CSS 和 HTML 代码 -

/* testing if it works by changing background color of li element */
.navigaton li > ul > li:hover .navigaton li{
  background: pink;
}

/* only the face icons(expressions removed from the html code to make it easier) which are being dynmically repeated from my controller needs to change color */
.navigaton li > ul > li:hover .navigaton li span i{
  color: blue;
}

        <md-content layout-padding>
          <div style="padding: 0px 16px;">
            <div ng-model="states.activeItem" ></div>
            <ul class="navigation">
              <div class="" layout="column">
                    <li md-ink-ripple="#ebeef4" ng-repeat="item in items" class="item {{item.id}}" ng-class="{'active': item.id == states.activeItem}" ng-click="states.activeItem=item.title">
                      <span>
                        <i class="material-icons md-24 center-icons">face</i>
                      </span>
                      <a class="title" ng-href="">item 1</a>
                      <span>
                        <i class="material-icons md-18 subicon-openstate" id="test-icons">face</i>
                      </span>
                      <ul class="submenu" id="submenu-item-hover">
                        <li ng-repeat="subItem in item.subItems" class="subItem">
                          <a href=>subitem 1</a>
                        </li>
                      </ul>
                    </li>
                </div>
              </ul>
            </div>

Answer 1

尚不支持任何 CSS 父级选择器。做你想做的事情的唯一方法是使用 Javascript。

这是一个简单的例子，说明如何做到这一点。当悬停子菜单时，Javascript onmouseover 和 onmouseleave 事件分别在父菜单上添加和删除 active 类。

然后您可以将任何 CSS 规则与您的 li.active 一起应用到您的图标上。

var items = document.querySelectorAll("ul > li > ul > li");

for (var i = 0; i < items.length; i++) {
  items[i].onmouseover = function (event) {
  	var li = event.srcElement;
  	if (li.tagName !== "LI") li = li.parentElement; // if relatedTarget = span inside li, li = relatedTarget.parentElement
    
    var parentLi = li.parentElement.parentElement; // li -> ul -> li
    parentLi.classList.add("active");
  }
  items[i].onmouseleave = function (event) {
  	var li = event.srcElement;
  	if (li.tagName !== "LI") li = li.parentElement; // if relatedTarget = span inside li, li = relatedTarget.parentElement
    
    var parentLi = li.parentElement.parentElement; // li -> ul -> li
    parentLi.classList.remove("active");
  }
}

li.active {
  color: blue;
}

<ul>
  <li><span>Menu 1</span></li>
  <li>
    <span>Menu 2</span>
    <ul>
      <li><span>Submenu 2.1</span></li>
      <li><span>Submenu 2.2</span></li>
      <li><span>Submenu 2.3</span></li>
    </ul>
  </li>
  <li>
    <span>Menu 3</span>
    <ul>
      <li><span>Submenu 3.1</span></li>
      <li><span>Submenu 3.2</span></li>
    </ul>
  </li>
</ul>