Display DIV when hovering another DIV's child CSS

Question

Is it possible to display a DIV that's located outside the DIV's child?

<div id='container'>
    <div>
        <div>
            <div id="one">Item 1</div>
            <div id="two">Item 2</div>
            <div id="three">Item 3</div>
        </div>
    </div>
    <div class="extra" id="one-extra">Show item 1 extra info!</div>
    <div class="extra" id="two-extra">Show item 2 extra info!</div>
    <div class="extra" id="three-extra">Show item 3 extra info!</div>
</div>

Shouldn't class:hover class do the job? Or is selecting DIV's outside its own DIV not possible without Javascript?

.extra {
 display:none;
}

#one:hover #one-extra {
 display: block;
}

@MattHamer5 I just made this code on the spot, not my actual code. — samsko b, Jan 21 '22 at 10:59
`class-1:hover class-2` targets only an item with `class-2` that is nested inside of `class-1`. So your `#one-extra` would have to be nested inside `#one`. I believe the only way to achieve what you are trying to do without rearranging the html is with javascript. — SmilyLily, Jan 21 '22 at 11:03
@SmilyLily Ok so achieving this with pure CSS alone is not possible? — samsko b, Jan 21 '22 at 11:12
@samskob It is if you alter the HTML, but if you don't want to alter the HTML, no. I've provided information in my answer. — SEoF, Jan 21 '22 at 11:14
`#one:hover #one-extra` selects an element with `id="one-extra"` that must be a **descendant** of another element with the `id="one"`. — connexo, Jan 21 '22 at 11:22

SEoF · Accepted Answer · 2022-01-21T11:36:28.683

2

The issue is to do with your selector.

A CSS selector cannot traverse upwards. Specifically, the "#one-extra" has been defined as a "descendant". It's also possible to define "latter siblings" with the "~", "next siblings" with the "+", and "child" with a ">". See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors for more information about CSS selectors.

Solution 1 - Changing the HTML

A change to your HTML and CSS could see styling apply with no need for JS:

<div id='container'>
    <div id="one">Item 1</div>
    <div id="two">Item 2</div>
    <div id="three">Item 3</div>
    <div class="contents">
        <div class="extra" id="one-extra">Show item 1 extra info!</div>
        <div class="extra" id="two-extra">Show item 2 extra info!</div>
        <div class="extra" id="three-extra">Show item 3 extra info!</div>
    </div>
</div>

and the CSS:

.extra {
    display:none;
}

#one:hover ~ .contents #one-extra {
    display: block;
}

Solution 2 - Add JS

The alternative is to use Javascript.

A JS library might be suitable, though I strongly suggest avoiding JQuery and other old libraries these days as they are bloated and provide nothing more than can be done with ease in raw Javascript, but add significant overhead, and add an unnecessary reliance.

If you're doing a lot of these things, specifically DOM manipulation, in JS in your project, a JS framework like Vue.js or React would provide a cleaner way to do this, though it would be a big change from no JS at all adding a large amount of bloat into your project.

edited Jan 21 '22 at 11:36

answered Jan 21 '22 at 11:12

SEoF

1,092
14
26

Very good answer, except the part where out of the blue you're suddenly suggesting the use of Vue or React for a purpose that these frameworks/libraries don't help with at all. You might want to consider removing that part. – connexo Jan 21 '22 at 11:20
If they can't change thier HTML for other reasons, using JS is the only option, and if they are doing that a lot, then using a framework might be a sensible move. – SEoF Jan 21 '22 at 11:23
A framework doesn't make sense only "because they are using alot of JS". It makes sense if what they are trying to do is create an application, however big or small it may be. – connexo Jan 21 '22 at 11:26
Not entirely true - a framework is always worth a consideration if you are doing a lot of DOM manipulation using JS. I'm not saying it is the solution, just it would be cleaner in some cases. Can't hurt for a person to consider their options, right? – SEoF Jan 21 '22 at 11:32
I've added more information now relating to the use of a JS framework, indicating it too would add a fair amount of bloat. – SEoF Jan 21 '22 at 11:37
That's the point. You don't buy a palm plantation if all you need is half a banana, and all OP has requested is not even half a banana. – connexo Jan 21 '22 at 11:38
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/241276/discussion-between-seof-and-connexo). – SEoF Jan 21 '22 at 11:39

Display DIV when hovering another DIV's child CSS

1 Answers1

Solution 1 - Changing the HTML

Solution 2 - Add JS