The paragraph is now normally hidden; its display property is set
to none. However, the last highlighted line of code says: If the mouse
hovers over the div, display the paragraph, or, if the mouse is over
the paragraph (which happens if the user moves off the div and on
to the paragraph once it is displayed), keep on displaying it. As soon
as the user moves off either the div or the displayed paragraph, the
rule no longer applies, and the paragraph is hidden again.
And there we have a simple pop-up effect with only CSS. Actually,
there is a small IDWIMIE catch??”IE6 only supports the :hover
pseudo-class on a (links), so we need to add a JavaScript ?¬? le, as an
IE behavior, called csshover.htc, to enable IE to respond to hovers
on any element like all the grown-up browsers can. (See the sidebar
???The Hover Behavior for Internet Explorer 6.???)
body {behavior:url(csshover.htc);}
STYLIN??™ WITH CSS - CHAPTER 4 132
Note that this code assumes that the csshover.htc ?¬? le is in the
same folder as the XHTML; normally, you would have the code in a
JavaScript folder with any other JavaScript that relates to your site
and link to it with a relative path.
The Hover Behavior for Internet Explorer 6
Before CSS2, only links could provide a response to being hovered over.
Using the :hover pseudo-class on a selector enables you to de?¬? ne a
response when any element is hovered over; for example, here??™s the CSS for
a div with a blue background that turns red when the div is hovered over.
Pages:
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176