I want to use CSS to show div id='b'
when I hover over div id='a'
, but I cannot figure out how to do it because the div 'a'
is inside another div
that div 'b'
is not in.
<div id='content'> <div id='a'> Hover me </div> </div> <div id='b'> Show me </div>
If you have two elements in your HTML and you want to :hover over one and target a style change in the other the two elements must be directly related--parents, children or siblings. This means that the two elements either must be one inside the other or must both be contained within the same larger element.
To display div element using CSS on hover a tag: First, set the div element invisible i.e display:none;. By using the adjacent sibling selector and hover on a tag to display the div element.
Use position:absolute; and set the "popup" one to be positioned within the boundaries of the other. The "popup" div should likely also be smaller. Use z-index to stack the "popup" one above the other one (give it a higher value for z-index ).
we just can show same label div on hovering like this
<style> #b { display: none; } #content:hover~#b{ display: block; } </style>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With