Hover state no longer working

Hi Guys,
I have just noticed that the hover state on the circular icons under the slider are no longer working.

Can anyone help please?

http://temp.osborneparkautorepairs.com.au/

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

Paul,
Thanks, that makes sense but I’m having trouble putting it into practice:
Can you have another look please?
Here is my amended code — I don’t get why the hover isn’t working?

<section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2">
<a href="#"><div id="air-con"></div></a>
<h3><a href="#">Air-conditioning</a></h3>
</section>

You need to put the anchor inside the div :slight_smile: Then set it to display:block with the correct height and width.

Mate you’re a legend! :grinning:
I really appreciate your help.

I had this row of icons tested and working and the client was over the moon - and some how… magically it didn’t work anymore! Got to be human error right?

Paul, do you know how to get rid of the -2 extension in the wordpress url?
I had two pages - I think one was copied from the other and after deleting one of them I have this pesky -2 added to the end of the url.

Any help appreciated.

Sorry I don’t use wordpress so can’t help but you can try posting in the CMS/Wordpress forum here and someone should know.

2 Likes

3 posts were merged into an existing topic: How to remove -2 amended to wordpress url

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.