Menu
In CSS, is it possible that when I rollover one element, I make another element visible? I have an icon, and when someone mouses over it, I want it to make visible a text element that describes what the icon does.
515
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.
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.
The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.
The adjacent sibling selector ( + ) selects all elements that are the adjacent siblings of a specified element. The word "adjacent" means "immediately following", and the example above selects all elements with class=".hide" , that are placed immediately after elements with class=".myDIV ", on hover.
You can make child-elements visible by hovering on the parent (as Hunter suggests), or siblings:
span:hover + span {display: block; }
There are maybe some slight cross-browser compatibility issues, but with a valid doctype I think IE7+ is okay with sibling selectors (though I've not tried to test that theory).
84
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
