当li元素悬停时，如何更改所需位置的颜色

Question

我有如下的css和html代码。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
.container {
width: 1000px;
margin: 0 auto;
}
.top-content {
width: 100%;
height: 100px;
background-color: gray;
}
nav ul {
display: flex;
justify-content: space-around;
}
nav ul li:hover {
cursor: pointer;
color: red;
}
main {
width: 100%;
height: 500px;
background: green;
}
nav ul li:hover .top-content {
background: red;
}
nav ul li:hover main {
background: red;
}

<div class="container">
<div class="top-content"></div>
<nav>
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</nav>
<main></main>
</div>

我想要的是当我将鼠标悬停在li元素上时，.top内容类和main元素被涂成红色。但据我所知，我对选择器有问题。如何仅使用css更改这些元素的颜色？

Answer 1

CSS属性不能修改任何内容，只能修改元素及其子元素(不能访问父元素或兄弟元素(点击此处了解更多信息。

您需要借助JavaScript来实现这一点。

let lis = document.querySelectorAll("nav ul li");
let topContent = document.querySelector(".top-content"); 
let main = document.querySelector("main"); 
lis.forEach(li=>{
li.onmouseover = ()=>{
topContent.style.background = "red";
main.style.background = "red";
}
li.onmouseleave = ()=>{
topContent.style.background = "gray";
main.style.background = "green";
}

})

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style-type: none;
}
.container {
width: 1000px;
margin: 0 auto;
}
.top-content {
width: 100%;
height: 100px;
background-color: gray;
}
nav ul {
display: flex;
justify-content: space-around;
}
nav ul li:hover {
cursor: pointer;
color: red;
}
main {
width: 100%;
height: 500px;
background: green;
}

<div class="container">
<div class="top-content"></div>
<nav>
<ul>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
<li>Lorem</li>
</ul>
</nav>
<main></main>
</div>