При наведении курсора на Local Disk(C:), (D:), (E:) текст должен менять цвет. У меня при наведении меняют цвет в том числе и все дочерние элементы списка, как этого избежать? При наведении на дочерние элементы родитель подсвечиваться не должен. Элементы, которые должны менять цвет помечены классом parent. По заданию CSS использовать нельзя.
Html
<div>This PC
<ul class="list" id="list">
<li class="parent">Local Dick(C:)
<ul>
<li>Programm Files</li>
<li>Users</li>
<li>Windows</li>
</ul>
</li>
<li class="parent">Local Dick(D:)
<ul>
<li>New Folder 1</li>
<li>New Folder 2</li>
<li>New Folder 3</li>
</ul>
</li>
<li class="parent">Local Dick(E:)
<ul>
<li>Games
<ul>
<li>GTA</li>
<li>Assasin's creed</li>
<li>Skyrim</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
JavaScript
for (let li of list.querySelectorAll("li")) {
let span = document.createElement("span");
span.classList.add("show");
li.prepend(span);
span.append(span.nextSibling);
}
list.onclick = function (event) {
if (event.target.tagName != "SPAN") return;
let childrenList = event.target.parentNode.querySelector("ul");
if (!childrenList) return;
childrenList.hidden = !childrenList.hidden;
if (childrenList.hidden) {
event.target.classList.add("hide");
event.target.classList.remove("show");
} else {
event.target.classList.add("show");
event.target.classList.remove("hide");
}
};
const parentLi = list.getElementsByClassName('parent');
for(var i = 0; i < parentLi.length; i++) {
light(parentLi[i])
}
function light(parentLi) {
parentLi.addEventListener("mouseover", function() {
this.style.color = "pink";
})
parentLi.addEventListener("mouseout", function() {
this.style.color = "black";
})
}