30).
div {position:relative; width:92px; border:2px solid #069;
padding:5px;}
h2, p {font-size:.7em; font-family:Arial, sans-serif;}
p {position:absolute; left:96px; top:15px; width:80px;
border:1px solid gray; padding:.3em; background-color:#FFD;}
FIGURE 4.30 The absolutely positioned
pop-up element is now positioned
where we want it to appear
relative to the containing div.
The left and top settings on the absolutely-positioned paragraph
push it across and down so it sits nicely to the right of the image.
The ?¬? nal step is to hide the pop-up until the user moves the mouse
inside the div. To do this, we will use the :hover pseudo class
(Figures 4.31A and B).
This series of screenshots were made
on my Windows computer, where I
have TechSmith??™s Snag-It, an excellent
screenshot tool that can capture
the cursor??”key to illustrating this
demo.
POSITIONING ELEMENTS 131
div {position:relative; width:92px; border:2px solid #069;
padding:5px;}
h2, p {font-size:.7em; font-family:Arial, sans-serif;
margin:0;}
p {position:absolute; display:none; width:80px; left:96px;
top:15px; border:1px solid gray; padding:.3em; backgroundcolor:#
FFD;}
div:hover p, p:hover {display:block;}
FIGURES 4.31A AND 4.31B The
display property used in combination
with the :hover pseudo-class
enables us to have the pop-up
appear when the user moves the
pointer into the div.
Pages:
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175