Change state of one div based on hovering list item within a sibling div

Question

How to influence on element depending on sibling's child state?

<div class="root">
    
    <div class="menu">
        <ul>
            <li>...</li>
        </ul>
    </div>

    <div class="main">
        ...
    </div>
</div>

Smth like this but it doesn't work:

.menu li:hover ~ .main {
  /* change "main" if some <li> is hover */
}

Answer 1

Problem

1: .root .main is not a sibling of .root .menu li.

2: There isn't a CSS selector currently capable of doing what you're trying to do - See the MDN docs. You will need to use a bit javascript/jQuery. Here are a few possible solutions...

Solution 1: Classes

CSS:

/* Default styling */
.menu {
    background: green;
    color: blue;
}

/* Hovered styling */
.menu.hovered {
    background: purple;
    color: red;
}

jQuery:

$('.root .menu li').hover(function() {
    $('.root .main').addClass('hovered');
}, function() {
    $('.root .main').removeClass('hovered');
});

Solution 2: Inline styling

CSS:

/* Default styling */
.menu {
    background: green;
    color: blue;
}

jQuery:

$('.root .menu li').hover(function() {
    $('.root .main').css('background', 'purple');
    $('.root .main').css('color', 'red');
}, function() {
    $('.root .main').attr('style', '');
});