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

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。

这是一个关于如何做到这一点的快速示例。当子菜单悬停时，Javascriptonmouseover和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>