Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #152159
    Em
    Participant

    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

    #152161
    Paulie_D
    Moderator

    404 error on your link.

    #152164
    Em
    Participant

    Sorry Paulie

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

    Em

    #152165
    Paulie_D
    Moderator

    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;
    }
    
    #152167
    Paulie_D
    Moderator

    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/

    #152175
    Em
    Participant

    Thanks Paulie

    Your “remove duplicate code” suggestion did the business.

    Much oblidged
    Em

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.