Hover state no longer working

HTML & CSS
2

Hi,

Did they ever work?

You have this css:

#air-con {
        width: 150px;
        height: 150px;
        background: url('http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/02/sprite-comp.gif') 300px 150px;
        margin: 0 auto;
        padding-bottom: 10px;
}
#air-con a {
        height: 150px;
        display: block;
}
#air-con a:hover {
        background: url('http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/02/sprite-comp.gif') 300px 300px; 
}

But you have this html:

<div id="air-con"></div>

You are applying the original image to the div and then changing the hover on a non existent anchor?

Change the css to this if you don’t want the anchor:

#air-con:hover{background-position:300px 0}

Do the same for the other icons with the correct positions.

If you do want the anchor then add the anchor into the html and make sure its width and height match the parent and then use your existing css.

1 Like