[HTML][CSS] Display div on hover, targeted

Question

When displaying a div on hover, how can you target a specific div? I need to display a hidden div from a link is on top of the page, and I can't figure out how. When i tested, if the link and the div are one after the other, it displays corectly. but if i add another link before the first one, it does not work anymore. From my testing using this CSS:

.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

And this HTML:

<div class="expand">expand</div> <!--this does not do anithing-->
<div class="expand">expand</div> <!--this works-->
<div class="expandable">expandable</div>

lalithkumar · Accepted Answer · 2017-05-26 11:55:46Z

2

Try the below one

.expandable{
display: none;
}
.expand:hover ~.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}

answered May 26, 2017 at 11:55

lalithkumar

3,5404 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Justinw Over a year ago

Might want to add that + is the adjacent sibling selector while ~ is the general sibling selector developer.mozilla.org/en-US/docs/Web/CSS/…

Dumitru Daniel Over a year ago

This is the answer i was looking for, hard one to find, thank you! The ~ does the magic. I can use jQuery, but i was looking for a way to do it without.

Dumitru Daniel Over a year ago

I did a but of research on the "~" and the sequencees need to share the same parent o the document tree. The example i gave is a simplified version of the core i have. The initial code puts both sequences in other <div> contructs. :( so i need to search a bit more.

O. Paquay · Accepted Answer · 2017-05-26 11:58:22Z

0

Only the hover on the second div works because of the behaviour of the '+' selector

https://www.w3schools.com/cssref/sel_element_pluss.asp

What W3C says :

Select and style every p element that are placed immediately after div elements:

div + p { 
    background-color: yellow;
}

answered May 26, 2017 at 11:58

O. Paquay

2761 silver badge10 bronze badges

Comments

moathdev · Accepted Answer · 2017-05-26 12:00:16Z

0

you can hide div by id using : jQuery :

<div id=“div”>

</div>

<script>
$(“#div”).hide("slow"); // you can change "hide" to "show" 
</script>

answered May 26, 2017 at 12:00

moathdev

2563 silver badges10 bronze badges

Collectives™ on Stack Overflow

[HTML][CSS] Display div on hover, targeted

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related