CSS - Menu Color Does Not Change On Hover

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.

Hi,

Is there any way to change the color of the menu text for that current page? For example when I'm on the 'About Us' page on my website, I want the text to be blue or #00175d to be precise.

I am not very good at coding or editing HTML/CSS, so I don't know how to do this.

All I know is that my website has a class on the body, and each menu item has a unique ID.

My website is: http://firstcareambulance .org/
Any help is appreciated.

Thanks

I have a button which is drawn using css background-image and it has a hover effect using css a:hover. I also need to have a click state for this button, so that each time the button is clicked it switches between two different states (4 states total). Is this possible? I'm assuming this will probably require JavaScript which I have little experience. Thanks in advance for any help!

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.

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!

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.

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

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!

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 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?

I am a photographer for a website and I know very little about anything other than basic html. With the website lady gone on a trip around the world for a year, I ended up being the person to attempt to modify our side menu to show an additional column of subcategories. I tinkered around with the code we had and I managed to get this to work in Firefox, however in IE7 the contents of the menu shift down a few pixels when you hover over a category.

To view my problem, go to scannerparts.biz

I've messed around with this for a few days and everything has become a big confusing mess so I have no choice but give in and ask for help. I thank anyone in advance for any assistance you can offer.

-Emerson

Here is the code:

hover.css

Code:

<!--
body {
	behavior: url(/images/csshover2.htc);
}

div#categorynav ul {margin: 0px; padding: 0px;}
.submenu {
	position: relative;
	margin: 0px;
	padding: 2px 0px;
	width: 178px;
}

div#categorynav ul.level1 li a {
	position: relative;
	display: block;
	text-decoration: none;
	margin: 0px;
	padding:  0px;
}

div#categorynav ul.level2 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level3 li {
	position: relative; 
	display: block;
	text-decoration: none;
	margin: 0px; 
	padding: 0px;
}

div#categorynav ul.level1 ul.level2 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

div#categorynav ul.level2 ul.level3 a {
	background-color: #000000;
	color: #fff;
	width: 178px;
	font-weight:normal;
	padding: 4px 4px 4px 14px;
}

html>body div#categorynav ul.level1 ul.level2 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}
html>body div#categorynav ul.level2 ul.level3 a {
	width: auto;
	padding: 0px; 
	margin: 0px;
}

div#categorynav>ul a {width:auto; padding: 0px; margin: 0px;} 
div#categorynav ul ul {position: absolute; display: none; width: 100px; z-index:900; padding: 0px; margin: 0px;}
div#categorynav ul ul li {padding: 0px; margin: 0px;}
div#categorynav ul.level1 li.submenu:hover ul.level2 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}
div#categorynav ul.level2 li.submenu:hover ul.level3 {
	display: block;
	list-style-image: none;
	list-style-type: none;

	
}

div#categorynav ul.level2 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level2 li a:hover {
	background-color: #000000;
	color: red;

}

div#categorynav ul.level3 {
	top: 0px;	
	left: 178px;
	margin: 0px;
	padding: 0px;
	width:160px;

} 
div#categorynav ul.level3 li a:hover {
	background-color: #000000;
	color: red;


}

Abbreviated Header Source (abbreviated for max character requirement, I think I left all the vital stuff there)
Code:

<!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>

<ss:comment><link href="hover.css" type="text/css" rel="stylesheet" media="screen"/></ss:comment>
<link href="$store.images['hover.css']" type="text/css" rel="stylesheet" media="screen"/>


<style type="text/css">
<!--
/* Style Sheet */
body {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 30px;
	margin-left: 1px;
	background-image: url(/images/backgroundgray.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
}
html { height: 100%; margin-bottom: 1px; }
#outline{
	border :0px solid #ffffff;
	width :760px;
	}
#categories{
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 5px 5px 1px 0px;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight :normal;
	font-size: 9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width: 178px;
	padding: 0px; 
	}
#cat1 a{
	background-color:#000000;
	color: #ffffff;
	text-decoration:none;
	text-align: left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
#cat1 a:hover{
	background-color:#000000;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	font-weight: normal;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
        width :178px;
	padding: 0px; 
	}
.leftnav {
	background-color:#000000;
	color:#ffffff;
	text-decoration:none;
	font-weight :bold;
	font-size:9pt;
	font-family:<ss:value source=$font.paragraph.face/>;
	padding : 2px 5px 1px 0px;
	}
.leftnav A:link {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;

	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:visited {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:hover {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ff0000;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
.leftnav A:active {
	background-color:#000000;
	border-bottom : 1px solid #666666;
	color:#ffffff;
	text-decoration:none;
	text-align : left;
	display: block;
	padding : 2px 5px 1px 0px;
	font-weight :bold;
	}
A:link {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:visited {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}
A:hover {text-decoration:none;color:<ss:value source=$font.paragraph.color/>;}
A:active {text-decoration:underline;color:<ss:value source=$font.paragraph.color/>;}

.content {font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

.title {font-size:10pt;font-weight:bold;font-family:<ss:value source=$font.paragraph.face/>
;color:#ffffff;}

.footer {font-size:9pt;font-family:<ss:value source=$font.paragraph.face/>
;color:<ss:value source=$font.paragraph.color/>;}

-->
</style>
</head>

<body>
<center>
<div id="outline">
<table width="760" border="0" cellspacing="0" cellpadding="0">
<!-- banner image -->
	<tr valign="top"><td colspan="4"><a href="(URL address blocked: See forum rules)"><ss:image source="$templateSet.images['header.jpg']" border="0"/></a></td></tr>

	<tr valign="top">
<!-- left nav -->
		<td bgcolor="#000000">&nbsp;&nbsp;</td>
		<td width="175" bgcolor="#000000">
			<div class="leftnav">
		<!-- store logo -->
			</div>
		
			<div class="leftnav">
				<div style="border-bottom : 0px solid #666666;">&nbsp;</div>
			<!-- home -->
				</div>
			
			<!-- categories -->
<p><font face="Arial,Helvetica,sans-serif" size="2" color="white"><b>Parts and Products:</b></font></p>
<div id="categorynav">
<div id="categories">
	<ul class="level1">                        			 
	<ss:foreach item="category" within="$catalog.categoryList()">
	<ss:sortby item="categorypriority" direction="asc"/>
	<ss:if test="$category.treeLevel == '1'">
	<ss:set name="hasSub" value="0"/>
		<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

		<ss:set name="hasSub" value="1"/>
		</ss:foreach>
                <li class="submenu">
		<div id="cat1"><ss:link source="$category"/></div>
			<ss:if test="$hasSub == '1'">
			<ul class="level2">
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">
			<ss:sortby item="categorypriority" direction="asc"/>

			<ss:if test="$category.treeLevel == '2'">
			<ss:set name="hasSub" value="1"/>
			<ss:foreach item="subcategory" within="$category.childrenToDepth(1)">

                        		<ss:set name="hasSub" value="1"/></ss:foreach></ss:if>
</li>
                                 	<li class="submenu">
					<div id="cat1"><ss:link source="$subcategory"/></div>
						<ss:if test="$hasSub == '1'">
						<ul class="level3">
						<ss:foreach item="subcategory" within="$subcategory.childrenToDepth(1)">
						<li><ss:link source="$subcategory" title="$subcategory.name"/></li>
						</ss:foreach>
						</ul>
						</ss:if>
						</ss:foreach>
						</ul>
						</ss:if></ss:foreach>

					</li>

					</ss:if></ss:if></ss:foreach>
				<br>                      
			 </ul>
			</div> 
			</div>

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

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.

hover color for an individual piece of link on a page full of links.
So not like this in the header:
Code:

<STYLE>
a:hover {color:#FF0000}
</STYLE>

but something like this, but then it has to work :
Code:

<a href="page.html" style="hover-color:#FF0000;">
Link text</a>

I noticed that 'text-decoration: none' works in the second way, but i dont know how this hover color has to be done in that way.