Modifying div from elements in other div - html

Question

I need assistance with changing css of div on hover event. My code:
<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>
I need to be able to change classes container1 and container2 when hovering on ul or li in the main container. I only know how to change it with sibling containers but that's not what I need.
.container-main:hover + .container1 {background:red;}
Would appreciate any help in achieving this. Thanks.

Answer 1

Unfortunately, based on your markup heirarchy, what you're looking for isn't possible with just CSS. You can do this pretty simply with javascript though. Here's an example that will add a background-color to .container1 when you hover .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>

Answer 2

is this what you want?
jQuery solution:
$( ".container-main li" ).hover(
function() {
//do something when hovering
}, function() {
//do something after hovering
$(".container1").css("background", "red");
}
);

Answer 3

Thanks for your answers everyone. I was just unsure whether it was possible or not, I'll try to rearrange my div heirarchy. I know it can be done with jQuery but I have a task where I only need to use CSS without any programming languages.
Once again, thanks a lot. I got a better idea of what needs to be changed.

Answer 4

I don't think css alone can do this.
Do you have access to 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");
});
})