[HTML] [CSS]悬停显示div，定位

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>

Answer 1

Try the below one

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

Answer 2

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;
}

Answer 3

you can hide div by id using : jQuery :

<div id=“div”>

</div>

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