Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Hover Problem

    I'm not even sure this is possible and my explanation maybe a little sketchy so please bear with me.

    A basic outline is that I'm trying to create a Next Page/Previous Page footer for a Tumblr theme and I want to use CSS hovers with an unordered list to change the background when you mouseover. Now this wouldn't usually be a problem, but this time I want to change the background next to the button rather than the background of the button itself and I just keep getting stuck.

    So i've got this: http://www.kixaldamus.com/tumblrtest/images/footer2.png as my basic footer sprite and I want the 'TGS' bit to swap to the > and < arrows when you mouse over the respective buttons.

    Right now my CSS/HTML for the footer looks like this:

    CSS:

    #footerwrapper {
    margin-left:auto;
    margin-right:auto;
    width:540px;
    height:100px;
    display:block;
    clear:both;
    }

    #footer {
    background-image:url(/tumblrtest/images/footer2.png);
    height:100px;
    width:540px;
    display:block;
    position:relative;
    }

    #footer li {
    list-style-type:none;
    display:block;
    position:absolute;
    }

    #footer a {
    display:block;
    }


    #previous {
    width:100px;
    height:40px;
    left:120px;
    top:20px;
    }

    #previous a {
    height:40px;
    background:url(/tumblrtest/images/footer2.png);
    background-position:-120px 0px;
    }

    #previous a:hover {
    background-image:url(/tumblrtest/images/footer2.png);
    background-position:-120px -200px;
    }

    #following {
    width:100px;
    height:40px;
    left:240px;
    top:20px;
    }

    #following a {
    height:40px;
    background:url(/tumblrtest/images/footer2.png);
    background-position:-240px 0px;
    }

    #following a:hover {
    background-image:url(/tumblrtest/images/footer2.png);
    background-position:-240px -100px;
    }



    HTML:

    <div id="footerwrapper">
    <ul id="footer">
    <li id="previous"><a href="#previouspage"></a></li>
    <li id="following"><a href="#nextpage"></a></li>
    </ul>
    </div>

    I'm having a few alignment problems, but that just fiddly and anyway, all it does is change the background within the hover box so I'm clearly going about things the wrong way. If someone could point me in the right direction, I'd really really appreciate it.

    Thanks,

    Kixa.
    Last edited by kixaldamus; 05-10-2011 at 08:18 PM. Reason: Working on a different solution so needed to change the links.

  • #2
    New Coder
    Join Date
    May 2010
    Posts
    79
    Thanks
    15
    Thanked 2 Times in 2 Posts
    #following a:hover > idorclasshere {
    }
    I don't know if that will work. o_O


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •