CSS - Table Row Hover Background-color

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

Nevermind, fixed. Changed Pixels into Percentages.

Delete thread.

Can this be done?
My table is 4 columns with about 400 rows.

I want to style the background color across each row but in fixed blocks/rows.
i.e
rows 1-55 red
rows 55-60 green
rows 61-100 red
rows 121-158 green
etc
just using two colors.

Any pointer in how it could be done?

I am creating a table of a school's schedule, Mon-Friday across the top and 8:30-3:00 along the side, one row for every 15 min increment.

I am using a td with rowspan=3 (or 2, or 4) to represent an activity that lasts for more than 15 minutes, which most do. I have a border around each td so it shows how long each activity lasts. I have had no problem creating this table.

However, what I'm having trouble with is having each 15 minute row alternate different background colors (e.g. gray/white) within the td. So if the activity td spans three rows, I'd like the row background colors to show white/gray/white within the td. The effect should be like the old alternating color computer paper -- different color for each line, yet each activity has a black border around it that spans more than one line.

I've tried setting each 15 min tr to alternating classes, <tr class="white"> then <tr class="shaded"> etc. but this only has the effect of changing the color of a td that begins in this row. Any td defined above that's spanning this row retains the color from the original row it was created in.

I know I could achieve this by doing away with the rowspans, but then things get a bit more complicated -- manually having to set top and bottom borders for each activity and also losing the vertical-align properties within the td. Would like to avoid this if there is a better way.

So I know that tables are a no-no now-a-days, but I am trying to help troubleshoot this problem without having to rebuild the site.

So this problem only occurs in IE, of course!

When you go to this page: http://dysonracing .com/company/news/archive.php?archive_year=2010

The grey box on the left that displays the news/events nav get a bit out of wack. What I mean by that is that the grey background on the table does not totally flow anymore. The left and right edges of the table dislay white at the top, then the grey about 1/2 way down and then black at the bottom, when the whole thing should be grey. It has a repeating background image. Even if I remove the image and just us the #333333 for the background color, issue is not solve.

It is strange because this problem only happens if you are viewing one of the archive links at the bottom of the page. If you just click News+Events from the main nav, it looks fine. But go to an archive link and it get funky.

Any ideas why this is displaying this way...and only in IE?!

I would like to have the background-color of a complete table row changed when I move the mouse over it.

Any ideas how to realize this within a CSS file (not with javascript)

Thanks in advance

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.

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

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?

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!

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

Alright - so I just changed my Java Script based navigation menu over to a CSS based menu for better search engine crawling and easy of use.

Here's what I want, and can't seem to do: The original font color of a the links is "white". Easy enough. When you mouse over the link it turns light grey. Looks great! This part works wonders.

Here's the problem...When you visit a page in the navigation, the "hover: change color to grey" doesn't work anymore. Instead of remains solid white.

Is there a fix/trick to making it work so that always always when you hover over these links they change to grey. Whether the link is active, or already visited, it turns grey during hover.

Thank for your help! To see this in action visit Window Film and More.com and take a look at the left navigation.