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

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65886536/change-state-of-one-div-based-on-hovering-list-item-within-a-sibling-div

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', '');
});