[Solved] image on hover doesn't appear for an unusual div.

[Em]

I am trying to make a simple GamePlan infographic page. Unfortunately my sprite doesn’t change on hover.

You can see the page idea here:Problem Page

The relevant html is here;

<div id="gameplancontainer">
    <div id="botrelease">
        <a href="http://threeprayers.com"></a>
    </div>
</div>

And the css for the divs is here;

gameplancontainer {
position: relative;
height: 450px;
width: 500px;
margin-left: auto;
margin-right: auto;
z-index: 0;
background-image: url(http://www.threeprayers.com/wp-content/uploads/2013/10/gameplan-background.png);
padding: 0;
overflow: auto;
}

#botrelease a {
position: relative;
top: 227px;
left: 27px;
display: block;
background: url(http://www.threeprayers.com/wp-content/uploads/2013/10/gamplan-icons.png) no-repeat -26px -26px;
z-index: 2;
width: 50px;
height: 50px;
}

#botrelease a:hover {
display: block;
background-image: url(http://www.threeprayers.com/wp-content/uploads/2013/10/gamplan-icons.png) no-repeat -126px -26px;
width: 50px;
height: 50px;
}

I would love some assistance in this regard. Warmest Em

[Paulie_D]

404 error on your link.

[Em]

Sorry Paulie

I’ve changed the page to public. My bad.

Em

[Paulie_D]

You have some duplicated code in the hover state.

I would remove everything that is NOT changing. In fact it looks as though the only thing you need is

#botrelease a:hover {
background-position: -126px -26px;
}

[Paulie_D]

Which file is the CSS in and n which line?

I’m not sure you have the link classes in the right order.

https://css-tricks.com/pseudo-class-selectors/

[Em]

Thanks Paulie

Your “remove duplicate code” suggestion did the business.

Much oblidged
Em

[Author]

Posts