CSS - Odd Link Hover Color Problem...

Hi,

I am trying to set background color on hover for a single table of links, rather than the entire document like the below example shows.

http://www.projectseven.com/tutorials/css/pseudoclasses/

I have tried various ways, I do not want to use javascript for this and I am aware of the way to apply background color to the .td field but this also applys to the normal text not just links.

So my question is how do I apply the background hover color to one table of links instead of the body. Thanks!

Greetings

I hope the title wasn't too confusing. If not this is sure to be.

What I have is and Unordered List that has a heading in each List Item and then a few items under that. The List Items are links arranged in a grid that have a hover effect on mouseover.

Due to the colors I want the heading (in this case h2) in each li to change color on the a:hover (the hover over anywhere on each li, not just over the h2 text).

How can I achieve this?

Here is some code to (hopefully) clarify:
Code:

#lower {
	width: 765px;
	float: left;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 20px;
	padding-left: 0px;
}
#lower ul {
	width: 775px;
	list-style-type: none;
	margin: 0;
	padding: 0px;
}
#lower  ul  li {
	font-family: "Trebuchet MS";
	font-size: 14px;
	width: 250px;
	float: left;
}
#lower ul li a {
	text-decoration: none;
	display: block;
	height: 125px;
	color: #262626;
}
#lower ul li a:hover {
	background-color: #5B8C3E;
	color: #D9D9D9;
}

#lower h2 {
	font-family: "Trebuchet MS";
	font-size: 16px;
	margin: 0px;
	color: #262626;
}
#lower a h2:hover {
	color: #D9CE3F;
}

As is the h2 only changes when it is directly hovered, not the the li.

Thanks in advance for your help.

Hello
Is there a way i can restore my <a href> link back to its original color, that is before the a:visited event, when I click on another link?
PS. no Javascript code needed, is their an alternative in css?

Hi there,

I am trying to create a link which will have a bacground colour appear "around" it when on hover. I currently have a background image, but I tried adding a margin with a background color, but it is not working.

This is my code:

PHP Code:
 a.button{
background-image: url('img/button.png');
height: 22px;
width: 210px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
padding: 3px 0 0 5px;
margin: 20px;
}

a.button:hover{
background-image: url('img/button.png');
height: 22px;
width: 210px;
font-family:Arial, Helvetica, sans-serif;
font-size: 14px;
color: #ffffff;
text-decoration: underline;
padding: 3px 0 0 5px;
margin: 20px;
background-color: #f6f6f6;
} 





Any ideas how I can acheive this?

Thanks

I am working on modifying a drupal theme style sheet. I am having trouble over riding a table row hover background color.

The style sheet has the background color defined as
Code:

.block .menu a:hover { background-color:#ecf4f8; }

I am working in the footer block trying to over ride the background color as transparent. Everything I try is not working. The theme has a bunch of these classes defined as "Power" Hover Classes.

So, back to my footer block modification. Here are the inherited classes when I inspect the element, pinpointing the background-color for hover that is not being overridden for transparent.
Code:

 div.node .field .field-label-inline, div.node .field .field-label-inline-first, .node-links ul.links:hover, .comment-links ul.links:hover, .view .grouped-admin:hover, .multistep li.active-step, .form-text:focus, .form-textarea:focus, .form-select:focus, .prose a:hover, table tr:hover td, table td.active, .block table tr.active, .block .menu a:hover { background-color: #ECF4F8; }

Can anyone help me write a css over-ride in my footer block for this?

Thanks for taking the time to read my question.

I have a container in which I have a link. I would like to change the color of the container when the user hovers over the link.

Can I do that? I can make the background of the text change, but the container is wider than the text.

HTML:
Code:

<div id="LinkBox" class="LB1"><a class="LinkBoxLink" href="#">Link #1</a></div>

CSS:
Code:

#LinkBox {
float: right;
height: 20px;
margin-bottom: 15px;
border-color: gainsboro;
border-width: 1px;
border-style: solid;
text-align: center;
}


.LB1 {
width: 241px;
}


a.LinkBoxLink:link {
text-decoration: none;
color: black;
}

a.LinkBoxLink:visited {
text-decoration: none;
color: black;
}

a.LinkBoxLink:hover {
background-color: red;
color: yellow;
}

a.LinkBoxLink:active {
text-decoration: none;
}

Thanks again for your help.

Brad

For some reason I cannot explain, IE6 is re-sizing (shrinking) a div when you mouse-over the second-to-last link in it when the a:hover css sets a background-color!?

Mouse-over the second-to-last link here (about this site):
URL

Mousing over the last link restores it, and if you go from the last link to the second last link it does not shrink it.

It's not doing it in Firefox, and it doesn't do it if the bottom link is not the last bit of text on the page.

This page has the same problem, except if you go down to the second-last link in September 2004, it does not exhibit this behavior, because the last link in the September 2004 div is not the last line of text in it.

URL

Help appreciated. I'm going crazy!

Hi, I just want to change the color when I mouseover an href without a style sheet. This does not work:

<a href="test.html" style="a:hover { color: #DA8525; }">Test</a>

Is that suppose to work?

Thanks for taking the time to read my question.

I have a <li> that has a background-color and border. I would like it to become transparent when the user hovers over it. In my a:hover I have background-color: transparent; but that is not working.

Any ideas?

Thanks,

Brad

I have these two areas.

Code:

.MenuItem {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:0px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

.MenuItemTop {
	color:#FFFFFF;
	font-size:12px;
	background-color:#CC0000;
	font-weight:bold;
	height:18px;
	padding-top:5px;
	padding-bottom:5px;
	border-top:2px solid #FF0000;
	border-left:2px solid #FF0000;
	border-bottom:2px solid #FF0000;
	border-right:2px solid #FF0000;
}

which refer to the left nav.

My code only changes the color behind the text, not the entire area (box) behind the text.

Code:

.MenuItemTop a:hover, .MenuItem a:hover {
	color:#FFFFFF;
	text-decoration:underline;
	font-size:12px;
	background-color:#000000;
}

Any ideas why?

example at : http://www.pierced.ca/FeedProductionRecordsHelp.htm

Brad

Hi. I am having dificulty getting a menu item to change colour and background colour when mouse over

http://www.des-otoole.co.uk/HC2010/holidayclub.php

any reason as it is at the end of the style sheet code

Code:

#tabnav a:hover
{
	background: #bfbfbf; 
	color: #f05320;
}

That's what a friend of mine is trying to do to her blog.
She's been trying for the longest time to get the hover command to change some link text color into a gif image, but all she can manage is the background behind the text.

If you don't get what I'm trying to say, this is a screen cap of what she has right now: img801.imageshack.us/i/screencap.png/

Basically, she want's to know if there's a way so that, rather than having the gif around her text, it would display inside of her text only so that the words would look like static.

If anyone knows if this is even possible, please help me out.

Thanks in advance.

ok the page is http://v2.seductionslingerie.biz/ and the top buttons (home, etc...) will not change their bg color on hover and the text inside the div will not valign to the bottom. please help!

here is the html/css code below

CSS:
Code:

	div.top_buttons	{
		background-image:url(../images/top_button_bg.jpg);
		background-repeat:no-repeat;
		background-position:bottom right;
		background-color:#660000;
		border:1px #660000 solid;
		height:50px;
		vertical-align:bottom;
		padding:2px;
		color:#FF99FF;
		font-family:"BankGothic Lt BT", Verdana, Arial;
		font-family:14px;
		font-weight:bold;
		cursor:hand;
		cursor:pointer;
		}
	div.top_buttons:hover	{
		background-color:#950000;
		color:#F5F1F2;
		}

HTML:
Code:

<div class="top_buttons">HOME</div>

Any and all help is much appreviated!

I have a table that contains a links in each cell. However, when I set a style to change the background with 'a:hover' it only changes the area around the link text. What I want is to change the background of the entire cell containing the link. TIA.

hey, i have a question regarding css on my website:

http://poolghost.com/

my css file is located at http://poolghost.com/base.css

basically what i am trying to accomplish is having a:hover's color change to a different color on the right side of the layout. and i would like links on the right side to be underlined.

please advise.. thanks, --avery