html - 从其他div中的元素修改div

在悬停事件上更改div的CSS时，我需要帮助。我的代码：

<div class = "container-main">
	<div class = "container-inner">
		<ul class = "list">
			<li>Option 1</li>
			<li>Option 2</li>
		</ul>
	</div>
</div>

<div class = "container1">
	<p>Container text</p>
</div>

<div class = "container2">
	<p>Container text</p>
</div>

将鼠标悬停在主容器中的ul或li上时，我需要能够更改类container1和container2。我只知道如何使用同级容器进行更改，但这不是我所需要的。

.container-main:hover + .container1 {background:red;}

将不胜感激实现这一目标。谢谢。

最佳答案

不幸的是，根据您的标记层次结构，仅CSS无法实现您想要的东西。不过，您可以使用javascript简单地做到这一点。这是一个将鼠标悬停在.container1时将背景颜色添加到.container-main ul的示例：

const list = document.querySelector('.container-main ul')
const container1 = document.querySelector('.container1')

list.addEventListener('mouseenter', () => container1.classList.add('red'))
list.addEventListener('mouseleave', () => container1.classList.remove('red'))

.red {
  background-color: red;
}

<div class = "container-main">
    <div class = "container-inner">
        <ul class = "list">
            <li>Option 1</li>
            <li>Option 2</li>
        </ul>
    </div>
</div>

<div class = "container1">
    <p>Container text</p>
</div>

<div class = "container2">
    <p>Container text</p>
</div>