CSS - Link Hover State

I am working on a website for a client and I am having trouble following A List Apart's tutorial (I can't link yet).

I have a working css dropdown menu using a css sprite. But what I am trying to do, is when you mouse over a dropdown and go down the dropdown, that the parent menu remains at it's hover state. Currently what is happening is as soon as I mouseout of the parent level it goes back to the normal state.

I don't really want to post the link to the test site itself if I don't have to for client privacy.

Please help! I'm getting way too frustrated now, I've look at so many examples and nothing seems to work.

I don't even need the javascript, I just need it to work. I've experimented with javascript and without.

This is the code I am using:

javascript:
Code:

<script type="text/javascript">
<!--
startList = function() {
if (document.all&&document.getElementById) {
menuRoot = document.getElementById("menu");
for (i=0; i<menuRoot.childNodes.length; i++) {
node = menuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//->
</script>

HTML Markup:

Code:

<div id="nav">
	<ul id="menu">		
		<li><a href="index.php" class="home"></a></li>
		<li><a href="link" class="tour"></a></li>
		<li><a href="link" class="events"></a>
			<ul class="drop">
				<li><a href="/events/calendar">Calendar</a></li>
				<li><a href="/events">Ag Science Hall of Fame</a></li>
				<li><a href="/events/tastes">TASTES</a></li>
			</ul>
		</li>
		<li><a href="news" class="news">News</a>
			<ul class="drop">
				<li><a href="link">Legislation</a></li>
				<li><a href="news/latest-news">Latest News</a></li>
				<li><a href="/news/newsletter">Newsletter</a></li>
				<li><a href="news/in-the-media">In the Media</a></li>
			</ul>
		</li>
		<li><a href="link"></a></li>
		<li><a href="link"></a></li>
	</ul>
</div>

Menu CSS:

Code:

#nav {
position: relative;
	float:left;
	width:940px;
	height:35px;
	z-index: 9;
	background: #fff;
		}	
		
#menu, #menu ul {
position: relative;
	padding:0;
	margin:0;
	clear:both;
	float:left;
	width:455px;
	z-index: 9;
	}
	
#menu ul.drop {
	background:#520006;
/*	padding:10px;*/
	width:inherit;
	clear:both;
	float:left;
	margin-top:35px;
	z-index: 9;
	}

#menu ul.drop li {
    width: 130px;
	clear:both;
	padding: 5px;
	z-index: 9;
	}
	
#menu ul.drop li:hover {
    background: #c10101;
	z-index: 9;
	}
	
#menu ul.drop a {
	
	color:#fff;
	font-size:11px;
	text-decoration:none;
	font-weight:normal;
	clear:both;
	float:left;
	z-index: 9;
	}

	
#menu a {
	display: block;
	/*width: 10em;*/
	float:left;
	clear:both;
	width:130px;
}

#menu li {
	float: left;
	/*width: 10em;*/
}

#menu li ul {
	position: absolute;
	width: 10em;
	left: -999em;
	z-index: 9;
}

#menu li:hover ul {
	left: auto;
}

#menu li:hover ul, #menu li.sfhover ul {
	left: auto;}


/*SPRITE BACKGROUP POSITIONING*/	
#menu li a.home, #menu li a.tour, #menu li a.events, #menu li a.news, #menu li a.donate, #menu li a.involved, #menu li a.resources, #menu li a.about, #menu li a.contact {
	float:left;
	background:url('images/menu.jpg') no-repeat;
	height:35px;
	text-indent:-999999px;
	}
	
#menu li a.home:hover, #menu li a.home.over {background-position: 0px -35px;}
#menu li a.home {width: 62px;}

#menu li a.tour:hover {background-position: -62px -35px;}
#menu li a.tour {width: 63px; background-position: -62px 0px;}

#menu li a.events:hover, #menu li a.events.hover {background-position: -125px -35px;}
#menu li a.events {width: 101px; background-position: -125px 0px;}

#menu li a.news:hover {background-position: -226px -35px;}
#menu li a.news {width: 80px; background-position: -226px 0px;}

#menu li a.donate:hover {background-position: -306px -35px;}
#menu li a.donate {width: 75px; background-position: -306px 0px;}

#menu li a.involved:hover {background-position: -381px -35px;}
#menu li a.involved {width: 74px; background-position: -381px 0px;}

ul {list-style: none;}

Hi all,

I'm having some trouble with my code for a CSS nav bar. I'm all new to this so am not sure where to start.

At present my nav bar is working fine. The only problem I am having is when one hovers over a new drop down item the parent doesn't change back to the non hovered state, it remains showing background image for the hover.

Here is my test page...

http://www.seattleunderground.co.uk/testmenu.html

and here is the CSS code...

Code:

.menu{
	border:none;
	border:0px;
	margin:0px;
	padding:0px;
	font: 100% "Marker Felt", "Comic Sans", sans-serif;
	font-size:15px;
	font-weight:bold;
	}
.menu ul{
	background:#000000;
	height:150px;
	list-style:none;
	margin:0;
	padding:0;
	}
	.menu li{
		float:left;
        width:150px;
		padding:0px;
		}
	.menu li a{
		background:url("images/BkgButtonUp.png");
		color:#ffffff;
		display:block;
		font-weight:normal;
		line-height:48px;
		margin:0px;
		padding:0px 25px;
		text-align:center;
		text-decoration:none;
		}
		.menu li a:hover, .menu ul li:hover a{
			background:url("images/BkgButtonHov.png");
			color:#000000;
			text-decoration:none;
			}
	.menu li ul{
		background:url("images/BkgButtonUp.png");
		display:none;
		height:auto;
		padding:0px;
		margin:0px;
		border:0px;
		position:absolute;
		width:150;
		z-index:200;
		/*top:1em;
		/*left:0;*/
		}
	.menu li:hover ul{
		display:block;
		
		}
	.menu li li {
		background:url("images/BkgButtonUp.png");
		display:block;
		float:none;
		margin:0px;
		padding:0px;
		width:150px;
		}
	.menu li:hover li a{
		background:url("images/BkgButtonUp.png");
        color:#ffffff;
		
		}
	.menu li ul a{
		display:block;
		height:48px;
		font-size:15px;
		font-style:"Marker Felt", "Comic Sans", sans-serif;
		margin:0px;
		padding:0px 10px 0px 15px;
		text-align:center;
		}
		.menu li ul a:hover, .menu li ul li:hover a{
			background:url("images/BkgButtonHov.png");
			border:0px;
			color:#000000;
			text-decoration:none;
			}
	.menu p{
		clear:left;
		}	

		

Please can some kind soul check this out and tell me where I need to add what lines to have the parents change back to BKGButtonUp.png. I want each item to turn white as I go through them.

Thanks v.much.

P.s. Is it possible to use Marker Felt Wide as the font? At the mo the writing is quite small, and changing font size shifts everything.

I used Marker Felt Wide on the main site, but created my nav menu using Flash at first. Flash is causing some issues however so I must change to CSS to fix things.

www.seattleunderground.co.uk

Best regards,

Ash

Hello,

The hover link looks good on IE7 and FF but not on IE6
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#header_navigation {
background-color:#0000FF;
	position:absolute;
	float:left;
	font-size:11px;
	color:#FFFFFF;
	font-weight:bold; 		
	left:190px;
	top:130px;
	width:145px	
}
#header_navigation ul {
border:1px solid #FF0000;
	float:left;
	list-style-type:none;
	margin:0 30px 0 0;
}
#header_navigation li {
	width:145px
}
#header_navigation li:hover {
	background-color:#FFFFFF;
}
#header_navigation a {
	text-decoration:none;
	color:#ffffff;
	background-color:none;
}
#header_navigation a:hover {
	color:#000000;
	background-color:#FFFFFF;
	width:145px
}
</style>
</head>

<body>
<div id="header_navigation"><!--begin of header_navigation-->
				<ul>
					<li><a href="index.asp">Home</a></li>
					<li><a href="#">News</a></li>
					<li><a href="#">Forum</a></li>				
					<li><a href="blog.asp">Blogs</a></li>			
					<li><a href="shoutbox.asp">Shoutbox</a></li>
					<li><a href="#">Testimonials</a></li>
					<li><a href="#">Photo Gallery</a></li>
					<li><a href="#">About Us</a></li>
				</ul>												
			</div>	
</body>
</html>

Not sure what this is referred to. I checked my dhtml book but its from 2000! I want to apply link, visited, hover, active to below code:

Code:

#print_category {
     position: absolute;
     left: 35%;
     top: 30%;
     font-size: 13px;
     text-align: left;
     line-height: 2 ;
     margin-right: 5em;
		}

Properties I want to apply:

A:link {color: #000099;
text-decoration: underline;
}

A:visited {color: #000099;
text-decoration: none;
}

A:hover {color: #000099;
text-decoration: none;
}

A:active {color: #000099;
text-decoration: none;
}

How can this be done, Ive tried but to no avail:

- A#print_category:active {color: #000099;
text-decoration: none;
}

Thanks!

I have the following code, but the CSS file that I have already defines link and hover to be something else

Is there a way I can edit the div#hdr_cnt to have it's own definition of the hover and link?

Thanks for the help


Code:

div#hdr_ctr	{ width:100%; min-width:670px; background-color:#FFF; overflow:hidden; margin:0; padding:0; text-align:center; color:#000000}

div#hdr_cnt { background: url('http://www.hobbyspeed.com/header/hobbyspeed.jpg') no-repeat center; width:670px; height:73px; margin:0 auto; padding:0;}	
	div#hdr_cnt ul.l { float:left; margin:15px 0 0 18px; padding:0; list-style-type:none; direction:rtl; text-align:right; color:#000000}	
	* html div#hdr_cnt ul.l { margin-left: 9px; color:#000000 }	
	div#hdr_cnt ul.r { float:right; margin:15px 0 0 20px; padding:0; list-style-type:none; direction:ltr; text-align:left;}

Thanks for taking the time to read my question.

I have links on my page that when visited, change color. Simple enough. I also have in my css a hover line that says change the color to white. This works on the unvisited links, but not the visited ones. Why?

Here is my css.

@charset "iso-8859-1";
.text {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #ffffff
}
.textCopy {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #CCCCCC;
hover: #ffffff
}
.textbigger {

font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #CCCCCC;
hover: #ffffff
}
a:hover {
color: #ffffff;
}
a:link {
color: #999999;
}

a:visited {
color: #747474;
}

a:active {
color: #CCCCCC;
}

body {
margin-top: 0;
background-color: #000000;

}

You can see this at work at www.pierced.ca

Brad

I'm trying to have a hover effect on a link within a <td> tag. In firefox it works fine, but in IE it's not working. I wasn't sure if there's a special property in CSS to get it working. My CSS code is:

Quote:
.leftblock a{display: block;
border-top: 1px solid #ffffff;
font-weight: bold;
color: #21536A;
text-decoration:none;
background-color:#CCCCFF;
}



Quote:
.leftblock a:hover{border-top: 1px solid #cccccc;
background-color: #DDEEFF;
font-weight: bold;
text-decoration: none;
}



I added display:block to the a:hover class as well to try that to no avail.

http://www.sassyproducts.com/hover.php is where you can see what I'm working on. If you hover over anywhere on the first link, Fundraising, it adds the hover effect, but the other ones will only show the hover effect if you hover over the text. This is in IE. In FF, it works properly. Any ideas what I may need to add or change?... Thanks.

I am attempting to create a link on a page that will only appear when it is hovered upon. This is to direct an administrator to an admin page. Here is what I have attempted so far to no avail:

Code:

div.headleft {
    text-align: right;
    width: 100%;
}

div.headleft a:link {
    display: none;
}

div.headleft a:visited {
    display: none;
}

div.headleft a:hover {
    display: block;
    background: inherit;
    color: #ff0000;
}

div.headleft a:active {
    display: none;
}

I have tried a few variations to the above snippet of code and am at my wits end...

My gratitude ahead of time...

My layout contains a vertical navigation bar. It is split up into individual images. I have created a table to organize the sliced images. I am using CSS to create a hover effect. When you mouseover the table cell, the backgroudn changes (and changes back when the mouse is removed.) This is all peachy, but is it possible for me to change the colors of the text within that table cell along with the background.

Heres the CSS:

Code:

	.link_hover1{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:visited{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:hover{
	background-image: url("images/link_img_01b.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	} 
	td.link_hover1:active{
	background-image: url("images/link_img_01a.jpg");
	background-repeat: repeat-n;
	cursor: pointer;
	width: 170px;
	height: 44px;
	}

I tired implementing the font-color property. No use. does this have something to do with my 'td' selector? I have a feeling that this is the problem.

Hello
I would like to make a hover effect when my mouse is over a link, as shown in my attachment.
What I want is, as shown in the attachment (at design time), when I hover on any link, two horizontal lines are added at the top and bottom of that specific link, and a slight black transparency appears as well as a highlighter (not the text of the link, and by default the background will be slightly grayed).
Anyone can help me with this?

Edit: even if the black transparency does not appear is not a problem, but how to implement the two lines? Am using only css and html here, no javascript or any other libraries.

I wish to have links for the menu like this: http://www.tristarwebdesign.co.uk/templates/templates/karma/index.html

However, I wish to have MY OWN font style on each links as it can be seen on:

The only difference I want is that this guy has used "title" in order to display text on each "li" link, while I would like to use MY OWN font style instead as can be seen from my page on: http://members.lycos.co.uk/darsh25/Personal%20Website/contact.php

i.e. the font style that can be seen in links like About, Services, Owner, Template & Contact.

Code:

				
<li><a title="link six" href="index.html">link six</a></li>
<li><a title="link five" href="index.html">link five</a></li>
<li><a title="link four" href="index.html">link four</a></li>
<li><a title="link three" href="index.html">link three</a></li>
<li><a title="link two" href="index.html">link two</a></li>
<li><a title="link one" href="index.html">link one</a></li>

My links are saved as an "image" (both background & the text on it) & as far as I'm aware, I couldn't possibly "hover" EACH INDIVIDUAL image of EACH of these links using CSS, could I ???

I know that I could "hover" change the background colour, but then what about the text on it ??? Is it possible to use the same fancy font AND being able to change the background colour when hover to "grey" (just as it could be seen from the "tristar" website.

My CSS code so far is:

Code:

/* CSS Document */

body 
{
	background-color:black;
	background-attachment:fixed;
}

/* .................................... HEADER & FOOTER ................................... */

#header
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	width:100%; 
}

#header  a
{
	color:yellow;	
	text-decoration:none;
}

#header  a:hover
{
	text-decoration:underline;
}

#footer
{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:white;
	text-align:center;
	border-top:3px solid fuchsia;
	float:left;
	background-color:black;
	width:100%; 
}

#footer a
{
	color:yellow;	
	text-decoration:none;
}

#footer a:hover
{
	text-decoration:underline;
}

/* ........................................ BANNER ........................................ */

#banner
{
	width:100%;
	border:none;
	text-align:center;
	background-color:none;
}

/* ......................................... TOP MENU .................................... */

#topMenu
{
	width:100%;
	float:right;
	border:none;
}

#topMenu ul
{
	float:left;
	margin-left:4%;
}

#topMenu ul li 
{
	display:inline;
	width:20%;
}


/* ................................... CONTENT ................................................ */

#leftContent
{
	float:left;
	width:10%;
	border:1px solid red;
	background-color:green;
}

#centerContent
{
	background-color:white;
	width:75%; 
	margin-left:1%;
	float:left;
	border:1px solid green;
}

#centerContent ul
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	list-style-type:decimal;
	color:black;
}

#centerContent li
{
	margin:3% 3%;
	line-height:1.5em;
}

#rightContent
{
	float:right;
	background-color:fuchsia;
	border:1px solid red;
	width:10%;
}

/* ................................... STYLES ......................................... */

p.first-letter:first-letter
{
	color:red;
	margin-left:5%;
	font-size:xx-large;
}

p
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	line-height:1.5em;
	margin:2% 3%;
	color:black;
}

h4
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:center;
	font-size:x-large;
	color:green;
}

h5
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	font-size:medium;
	margin:2% 3%;
	color:blue;
}

h6
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	margin:0;
	font-size:medium;
	font-weight:normal;
	color:red;
}

.italic
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-style:italic;
}

.bold
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:black;
	font-weight:bold;
}

.colorTextRed
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:red;
}

.colorTextBlue
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:blue;
}

.colorTextGreen
{
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:justify;
	color:green;
}

/* ................................... TABLE ......................................... */

#contactTable
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	text-align:left;
}

#contactTable tr
{
	border:none;
}

#contactTable th
{
	color:fuchsia;
}

#contactTable td
{
	font-size:medium;
	color:black;
}

/* ................................... CLASSES ......................................... */

.table
{
	background-color:white;
	border-spacing:2%;
	margin:3% 3%;
	font-family:Georgia, "Times New Roman", Times, serif;
	border-collapse:collapse;
	text-align:left;
}

.tr
{
	border:none;
}

.td
{
	border:thin solid red;
	font-size:medium;
	padding:2px;
	text-align:center;
	color:black;
}

I am trying to learn CSS and am currently trying to mirror a website to practice. I would post the website I am mirroring but due to the forum rules, I cannot.

I am trying to replicate the black background with opacity for the a:link and the white background with opacity for the a: hover. My browser is IE and I have tried the filter:alpha(opacity=1-100) but to no avail.

Here is the HTML I am using for this particular container:

<div id="fivels">

<div id="classone">
<a class="home" href="#">Home</a>
<a class="gallery" href="#">Gallery</a>
<a class="about" href="#">About</a>
<a class="help" href="#">Help</a>
<a class="partner" href="#">Partner</a>

</div>

</div>

And here is my CSS:

#fivels {
margin-left: auto;
margin-right: auto;
height: 150px;
width: 800px;
background-image: /* the forum will not let me post URLs, gut a jpg of grass goes here */
}



#classone {
margin-left: auto;
margin-right: auto;
width: 800px;
text-align: center;
}

#classone a:link {
color: white;
text-decoration: none;
background-color: black;
filter: alpha(opacity=20);
}

#classone a:visited {
color: white;
text-decoration: none;
background color: black;
filter: alpha(opacity=20);
}

#classone a:hover {
color: white;
text-decoration: none;
background-color: white;
filter: alpha(opacity=20);
}

.home {
padding: 3.2em;
}
.gallery {
padding: 3.2em;
}
.about {
padding: 3.2em;
}
.help {
padding: 3.2em;
}
.partner {
padding: 3.2em;
}

Also, on a side note, is using the padding attribute the most efficient way of seperating the links?

Thanks for taking the time to read my question.

It's been a while since I last tried making a page.

I've got some images as href's and want to show a border around them on the hover. It's not working, they're just showing up as purple (default visited). This makes some sense as the links are just bookmarks on the same page. But in my css I have
link, visited, and active all the same color. Only hover is different, and none of them are purple.

I've read this http://www.w3schools.com/css/css_pseudo_classes.asp and I think I've got it, but it's not working.

HTML
Code:

<a class"NavButtons" href="AssetDataDBHelpFile.htm#AssetForm"><img src="Computer.jpg" width="133" height="84" alt="Asset Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#PeripheralForm"><img src="Peripheralbutton.jpg" width="133" height="84" alt="Peripherals Management Form"></a>
<a class"NavButtons" href="AssetDataDBHelpFile.htm#ReportCenter"><img src="Report.jpg" width="133" height="84" alt="Report Center Form"></a>

CSS
Code:

a.NavButtons:link {
border-color: green;
border-width: 2px;	  
border-style: solid;
}     /* unvisited link */

a.NavButtons:visited {
border-color: green;
border-width: 2px;	  
border-style: solid;
}  /* visited link */

a.NavButtons:hover {
border-color: Red;
border-width: 2px;	  
border-style: solid;
}   /* mouse over link */

a.NavButtons:active {
border-color: green;
border-width: 2px;	  
border-style: solid;
}   /* selected link */

This is the new site I'm working on:
http://animalemergencybloomington.com/Index2.html

Link and Visited Link colors work, but I can't get Active or Hover color to work. (Doesn't work in any of the browsers I've tested it in.)

Right now I have this in the <head>

css Code:
Original - css Code <style type="text/css"> body { color: #000000; font-size: 12pt; font-family: Verdana; margin: 0px 0px; } A:link { text-decoration: none } A:visited { text-decoration: none } </style>

  

 <style type="text/css">


 body {


 color: #000000;


 font-size: 12pt;


 font-family: Verdana;


 margin: 0px 0px;


 }


 A:link { text-decoration: none }


 A:visited { text-decoration: none }


 </style> 

and this for the <body>:

<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" alink="#0000FF" vlink="#1E90FF">

adding a:active and a:hover colors to the style gives a "parse error" for those lines when I try to validate and doesn't work anyway as far as getting a color change on hover.

I've been trying different combinations in the body and style all afternoon but get error warnings on everything I've tried except the above combo.

I'm just trying for links that are never underlined (hate how cluttered that makes things look) but turn red on hoover.

Help?
Thanks,
Ez