The negative margin-top setting pulls the
pop-up upward, so it no longer sits under the main image. The value is the same
as the height of the main image minus the vertical offset required. (If it were set to
the height of the main image, the pop-up would sit flush to the top of the image
during the hover state, which looks cluttered.) The margin-left value provides a
horizontal offset, while the padding value places some padding within the span, so
its contents don??™t hug its borders. The other settings style colors and fonts.
#popupContainer a:hover span, #popupContainer a:focus span,
?? #popupContainer a:active span {
display: block;
position: relative;
left: 0;
top: 0;
width: 360px;
color: #000000;
font: 1.1em/1.5 Arial, Helvetica, sans-serif;
margin-top: -335px;
margin-left: 50px;
padding: 20px;
background-color: #e0e4ef;
border: 1px solid #666666;
}
9. Next, a rule is needed to float the image within the span. The margin settings
ensure that the image doesn??™t hug the text-based content.
#popupContainer a:hover span img, #popupContainer a:focus span img,
?? #popupContainer a:active span img {
border: 1px solid #666666;
float: right;
The selector for step 8??™s code block offers three alternate routes for users to access
the pop-up: the hover state (for mouse users), the focus state (for keyboard users),
and the active state (for Internet Explorer keyboard users, since that browser doesn??™t
yet support :focus).
Pages:
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265