Help - Search - Members - Calendar
Full Version: image rollover codes
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
twllbzz
I'm trying to do something that should be very simple in html, but isn't. That is to make tooltips that persist for more than a few seconds. I go to the newsgroup alt.html, and they say it can be done in css. They even listed code for it. I knew nothing about css, so commenced a study of it. Now I have studied it (for a few days) but still can't understand the code. On this here site I see a question involving "image rollover codes" that is similar to the code I'm trying to figure out. What I see in the "image rollover codes" question here is three lines:

a.josh { ... }
a.josh span { ... }
a.josh:hover { ... }

I could be wrong, but:

I understand the first line as defining an anchor class named josh, and assigning a style to it. I understand the third line as assigning a style to the :hover pseudoclass of anchors having class="josh". I don't understand what the middle line is trying to say. "a dot josh space span space curly brace" ... what on earth does that mean?

My references are HTML & XHTML: The Definitive Guide, and CSS: The Definitive Guide, both from O'Reilly. Maybe I need better references. Somebody please give me a hint.

pandy
The selector in the second line matches any SPAN element inside an A with the class 'josh'.

HTML
<a class="josh">Blah blah <span>matches this</span> blah</a> blah bla <span>but not this</span> blah.


See http://htmlhelp.com/reference/css/structure.html (Contextual Selectors) and http://www.w3.org/TR/CSS2/selector.html#descendant-selectors . The selector changed name in CSS 2, but it's the same one.

Maybe 'a.josh:hover' should be 'a.josh:hover span'? If so, the CSS could be used to hide the SPAN and then show it on hover.
twllbzz
QUOTE(pandy @ Oct 14 2009, 04:13 AM) *

The selector in the second line matches any SPAN element inside an A with the class 'josh'.

HTML
<a class="josh">Blah blah <span>matches this</span> blah</a> blah bla <span>but not this</span> blah.


See http://htmlhelp.com/reference/css/structure.html (Contextual Selectors) and http://www.w3.org/TR/CSS2/selector.html#descendant-selectors . The selector changed name in CSS 2, but it's the same one.

Maybe 'a.josh:hover' should be 'a.josh:hover span'? If so, the CSS could be used to hide the SPAN and then show it on hover.


Yes that's it. Contextual selectors. I see it now. Thank you very much. And yes it would be 'a.josh:hover span'.

Two weeks ago I couldn't even spell CSS and now I are trying to write in it. Fancy that.

Thank you, pandy.
pandy
CSS isn't as bad as it seems. Good luck. smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.