在子菜单（第二个ul元素）中的任何li元素上悬停时，如何更改第一个ul li的颜色-仅两个跨度图标？

Question

我正在尝试在我的第一个ul li span i类元素（在“ a”元素之前和之后）中更改两个图标的颜色，但是我似乎无法正确地将它们作为目标。

我设法通过分别悬停每个单独的a /图标并更改其颜色来使我的原始代码正常工作，但我不希望这样。当我将鼠标悬停在第2个（子菜单）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类。

然后，您可以在li.active中应用任何CSS规则，以在图标上应用某种样式。

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>