Menu
I am struggling to get a simplest css hover pseudoclass to work. Anybody knows why the following doesnt work?
the css
#hidden {display:none;}
#show:hover #hidden{display:block;}
the html
<a href="#" id="show">show</a>
<div id="hidden">here i am</div>
I really feel stupid asking such a simple question, i did this a hunderd times, but cant figure out why this shouldnt work.
837
Also, hover will not work if you use the wrong CSS format. Note that if you do not get the specificity right, the hover style will not work. Although you can use the ! important rule, there is no guarantee it will always work.
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
You might have linked your stylesheet to your HTML file improperly. Some other CSS in the context of your project may be overriding the piece that you've given here. You might be running into browser compatibility issues with the :hover selector or something else in your code that is breaking the styling.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). For example, the pseudo-class :hover can be used to select a button when a user's pointer hovers over the button and this selected button can then be styled.
Try this
#show:hover + #hidden{display:block;}
:hover #hidden implies that #hidden is a child of the hover element. The + selector looks for the next adjacent sibling.
153
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
