sheepImageMap a:hover {
text-indent: 0;
color: #ffffff;
}
At this stage, the text still doesn??™t stand out enough. Therefore, add the following
rule, which styles the span elements wrapped around the text in each list item, setting
a background color and adding some padding around the content:
.sheepImageMap a:hover span {
padding: 2px;
background-color: #000000;
}
This looks fine, but with some further absolute positioning, these captions can be
positioned elsewhere within the hot-spot. By adding the bolded rules shown following,
the captions are positioned at the bottom right of the hot-spots, as shown
in the original example screenshot before the start of the exercise.
.sheepImageMap a:hover span {
padding: 2px;
background-color: #000000;
position: absolute;
bottom: 0;
right: 0;
}
Pre-version 7, Internet Explorer didn??™t respond to :hover unless it was used on a link.
Because of this, the borders will not appear in that browser, causing a 1-pixel ???jog??? up
and left when you mouse over a hot-spot. You can get around this by applying the
border to the following rules (via a conditional style sheet): .sheepOne a:hover,
.sheepTwo a:hover, and .sheepThree a:hover.
THE ESSENTIAL GUIDE TO CSS AND HTML WEB DESIGN
182
Enhancing links with JavaScript
In this section, we??™re going to use a little JavaScript, showing some methods of providing
enhanced interactivity and functionality to links. Note that in all cases, a non-JavaScript
backup (or fallback) to essential content is required for those who choose to surf the Web
with JavaScript disabled.
Pages:
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274