How to display div with hovering on a nested div?-CodePudding

I want to display a different div with a hover effect from a nested div.

Shows that hovering on the nested div works.

.main-div > .nested-div:hover {
    border: 1px rgb(0, 0, 0) solid;
}

Hover effect for the div class I wanted to be displayed (does not work).

.main-div > .nested-div:hover   .display-this {
    display: block;
}

Class I want to be displayed.

.display-this {
    display: none;
}

Example of the divs in question:

<div class='main-div'>
    <div class='nested-div'>
        Hover Me
    </div>
</div>
<div class='display-me'>
    Display Me
</div>

Thanks

CodePudding user response：

In order for it to work you need to move display-this into main-div

When you're using the selector you say that you want to select the element next to the sibling element.

<div class='main-div'>
    <div class='nested-div'>
        Hover Me
    </div>
    <div class='display-this'>
        Display Me
    </div>
</div>