...

View Full Version : Problems Using a:hover On Links



Daniel_A_Varney
07-03-2011, 05:41 AM
I'm having trouble with my a:hover link background colours.

My ul code generates a series of strips with the link text inside. My intention is to have the background colour of the whole strip (the list item) change colour when it's moused-over. Everything I have tried fills only the immediate area around the text but will not fill the whole width of the li element itself. I hope this makes sense.

Here's an example of the code I have used so far:

<ul id="contextmenu">
<li><a href="url">Option One</a></li>
</ul>

And the CSS is:

a:hover {
text-decoration:none;
background:#444
}/* mouse over link */

I have also tried specifiying the whole li as a link, thus:

<ul id="contextmenu">
<a href="url"><li>Option One</li></a>
</ul>
But that only makes things worse.

And I have also tried replacing the colours with gif images but still, no dice.

I'm sure there is some attribute to the link psuedoclass, which specifies the whole width of the li element as a clickable item (therefore 'hoverable') but I can't remember what it is.

So what am I doing wrong here and please can you help?

Thanks

Sammy12
07-03-2011, 06:11 AM
ul li a { display: block; float: left; }




<ul>
<li><a href="#"></a></li>
</ul>


if the <a> is an image:



ul li a { background-image: url('images/ .jpg') repeat-x; display: block; float: left; }
ul li a:hover { background-image: none; background-color: #333; }


Recommended Full Script:



* {
margin: 0;
padding: 0;
}

ul.nav li {
float: left;
}

ul.nav li a {
float: left;
display: block;
text-decoration: none;
}

ul#topBar {
height: 50px;
}

ul#topBar li {
height: 50px;
}

ul#topBar li a {
height: 50px;
line-height: 50px;
padding: 0px 30px;
}





<ul id="topBar" class="nav">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>

Daniel_A_Varney
07-03-2011, 09:03 PM
Thank you, Sammy. I think you answered my question in the other thread, to be honest. Here, I am not working with a left floated set of list items.

Would you be up for checking over my code, when I have it done? The use of the block level element seems to have put things right but I'm not sure if I have done things correctly. I have not included a ul li style but seperate ul and li styles, using id instead of class.

Thanks again for the time put into your thoughtful posts.

Sammy12
07-03-2011, 09:14 PM
sure I'll pm you



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum