Menu
I have looked at several other questions but I can't seem to figure any of them out, so here is my problem: I would like to have a div or a span, when you hover over it an area would appear and would be like a drop down.
Such as I have an div, and I want to hover over it and have it show some info about the item I hovered over
<html> <head> <title>Question1</title> <styles type="css/text"> #cheetah { background-color: red; color: yellow; text-align: center; } a { color: blue; } #hidden { background-color: black; } a:hover > #hidden { background-color: orange; color: orange; } </styles> </head> <body> <div id="cheetah"> <p><a href="#">Cheetah</a></p> </div> <div id="hidden"> <p>A cheetah is a land mammal that can run up 2 60mph!!!</p> </div> </body> </html>But this ^ doesn't seem to work, I don't know why... and if there is a way to do that in CSS, I would like to know, but I want any and all suggestions.
292
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.
You can achieve this in CSS only if the hidden div is a child of the element you use for hovering:
http://jsfiddle.net/LgKkU/
129
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
