从其他 div 中的元素修改 div

Question

我需要帮助在悬停事件时更改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 和容器 2。我只知道如何使用兄弟姐妹容器更改它，但这不是我所需要的。

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

将不胜感激任何帮助实现这一目标。谢谢。

Answer 1

不幸的是，根据您的标记层次结构，仅使用 CSS 无法实现您正在寻找的内容。不过，你可以用javascript非常简单地做到这一点。下面是一个示例，当您将鼠标悬停在.container-main ul上时，它将为.container1添加背景色：

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>

Answer 2

这是你想要的吗？ j查询解决方案：

$( ".container-main li" ).hover(
function() {
//do something when hovering 
}, function() {
//do something after hovering 
$(".container1").css("background", "red");
}
);

Answer 3

谢谢大家的回答。我只是不确定这是否可能，我会尝试重新排列我的div 继承制。我知道这可以用jQuery完成，但我有一个任务，我只需要使用CSS，没有任何编程语言。
再次感谢。我对需要改变的地方有了更好的了解。

Answer 4

我不认为 css 可以单独做到这一点。 你有权访问jquery吗？ https://jsfiddle.net/ifinto/o2gxgz9r/

$(document).ready(function() {
$(".container-main li").each(function(index) {
$(this).hover(
function() {
div = ".container" + (index + 1);
console.log("in_" + div);
$(div).css("background-color", "red")
},
function() {
div = ".container" + (index + 1);
console.log("out_" + div);
$(div).css("background-color", "white");
});
})