HTML and CSS Reference
In-Depth Information
The problem with this approach is that it requires you to change any effect like this right there
in the source code. Imagine if this were a common navigation element that had some kind of
hover effect, was repeated several times on any web page, and was present on hundreds of
web pages—that's a lot of changes to make! CSS lets you centralize this type of effect; all you
need to do is specify a class in the markup where you want the effect to apply and specify the
image swap in the CSS. Here's how it's done:
.ex1 {
display:block;
width:200px;
padding:10px;
border:1px solid black;
margin:0 0 10px 0;
text-decoration:none;
text-align:center;
background:#fff url(stars-dim.gif) no-repeat center center;
}
.ex1:hover {
border:1px dotted red;
background:#fff url(stars.gif) no-repeat center center;
}
...
<div><a href="nowhere.html" class="ex1" >Hover over me</a></div>
<div><a href="nowhere.html" class="ex1" >Hover over me</a></div>
There is a selection of other styles that we've applied in the previous example, but the key
part is highlighted in bold. Figure 8-16 shows a screen shot of the default state and the hover state.
Figure 8-16. The background image changes on hover; we set this using CSS.
Avoiding “Divitis”
Using a div in this way does the job perfectly well, but it can be improved a little. If the previ-
ous technique were applied to a navigation area, or some other section where the technique is
used over and over again, using so many class attributes would be overkill. We can tidy this up
by wrapping all of the links in a containing div and then using a contextual selector to achieve
the same effect. Here's an amended version:
div.ex2 a {
display:block;
width:200px;
padding:10px;
border:1px solid black;
Search WWH ::




Custom Search