...

View Full Version : CSS Hover Problem



kixaldamus
05-10-2011, 05:06 PM
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.

kenshn111
05-10-2011, 11:10 PM
#following a:hover > idorclasshere {
}
I don't know if that will work. o_O



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum