PDA

View Full Version : Resolved Sliding doors for :hover only?



crisis
Aug 11th, 2009, 04:46 AM
I was working on a project that required tabular links. Decided to use sliding doors for it. Cool; I've done them before I can do them again.

However, this situation is a little different - I've never heard of a way to have the background implemented only when the link is hovered over.

Here's the code. (NOTE - it's not SD currently.)



#wrap #links {
height:25px;
padding:0 0 0 20px;
margin:0;
width:380px;
font-family:'trebuchet ms', verdana, arial, sans-serif;
font-size:11px;
color:#6D96B7;
text-transform:uppercase;
text-align:left;
}

#wrap #links ul {
margin:0;
padding:0;
}

#wrap #links li {
display:inline;
float:right;
}

#wrap #links a {
color:#6D96B7;
text-decoration:none;
padding:4px;
height:25px;
margin:0;
text-align:center;
width:60px;
}

#wrap #links a.whee {
background:url('../images/linkbg2.bmp');
color:#3D6687;
}

#wrap #links a:hover.whee {
background:url('../images/linkbg2.bmp');
color:#000000;
}

#wrap #links a:hover {
background:url('../images/linkbg.bmp');
color:#FFFFFF;
}




And the HTML:





<div id="links">
<a href="#" class="whee">Make</a>
<a href="#">Friends</a>
<a href="#">Not</a>
<a href="#">Enemies</a>
</div>




A basic description of what's there and what I want to happen:

Dark background. Links are lightish color, no background.
Hover: Links get a tab behind them. Darker color.
Current page's link: Different tab behind it. Current page's link on hover: Text darker.

I've achieved this, and was pretty happy with it, until I noticed that because each link had to be 60px wide (because that's how wide the image was) and the link text itself was different widths, I was getting funny spaces between links. Generally gross.



I suppose I could give each link its own custom-width background (I know what each link will say and I know that it'll say that for a while) but it seems kind of ugly. I figured there had to be a better way to do it.


Note - I tried span as the second door and it didn't work. Probably because it works all the time, not just on the hover. Is there some way to get something like #wrap #links a:hover span or #wrap #links span a:hover? Would that even solve my problem?


Please help meh :/

Crisis //

crisis
Aug 12th, 2009, 05:25 AM
Resolving this, though it isn't resolved. Thanks for trying!