Geek Answers Handbook

CSS Flip one item and create another item.

In CSS, is it possible that when I knock over one element, I make another element visible? I have an icon, and when someone tricks me, I want them to make a visible text element that describes what the icon does.

+7
css
source share
5 answers

Here is just the CSS hint that I use all the time :) Works great even in IE.

a:hover { background:#ffffff; text-decoration:none; } /*BG color is a must for IE6*/ a.tooltip span { display:none; padding:2px 3px; margin-left:8px; width:130px; } a.tooltip:hover span{ display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c; } Easy <a class="tooltip" href="#"> Tooltip <span>T his is the crazy little Easy Tooltip Text. </span> </a>

Hope this helps.

+15
source share

You can make children visible by hanging on a parent (as Hunter suggests ) or siblings:

 span:hover + span {display: block; }

There may be some compatibility issues between browsers, but with a valid doctype, I think IE7 + is ok with selectors (that I have not tried to test this theory).

+6
source share

sure it is!

 .me:hover span { display: block; }

If you want to show an element that is not a child of the hovering element, you may need to use javascript

+3
source share

Here is an example of a small example that will not work on IE ...

 <html> <head> <style> div.tooltip { margin-top: 16px; margin-left: -1px; position: absolute; border: 1px solid black; background-color: blue; color: yellow; display: none; } div.icon { width: 16px; height: 16px; border: 1px solid blue; background-color: cyan; } div.icon:hover .tooltip { display: block; } </style> </head> <body> <div class="icon"> <div class="tooltip">This is what the icon does.</div> </div> </body> </html>

But you really should just use jQuery.

+1
source share

Accept the JavaScript recommendation. In particular, jQuery is the simplest and most suitable for the logic of the behavior of the page. I think CSS should only look / feel / style ... Javascript should be all your logic of events and behavior.

0
source share

More articles:


All Articles