Menu
I've seen answers suggesting just display:none on the :hover css. But that makes the div flicker when the mouse is moving.
EDIT: Added jsfiddle
212
You can do this by using the :hover property of a page element. For example, if we have a div inside another div, we can check the hover of the outer div to show/hide the inner div. This CSS hides the inner div by default using "display: none;".
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.
Hovering is a fundamental digital action that involves placing the mouse cursor on the target link or button. Users mainly use the mouse hover action to access sub-menu items.
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.
display:none will take the element out of the render tree, so it loses :hover state immediately, then reappears and gets :hover again, disappears, reappears, etc...
What you need is:
#elem { opacity:0; filter:alpha(opacity=0); }
It will leave the place empty, so no flickering will appear. (Demo or yours updated)
183
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
