CSS hover on individual link (li) ???

[j4mes_bond25]

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.

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

/* 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;
}

[tgreer]

The site you reference, and the CSS-hover style, are for changing attributes the browser can actually change via CSS: fonts, colors, borders, etc.

The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.

You want to use old-fashioned image rollover code, if your buttons/links are going to be images.

[Dani]

Not true tgreer! ... Suppose you have image1.gif and image2.gif which are both 100x50 pixels in size. What you can do is create a <div> of that height and width, and fill it with a clear.gif filler. Set the background of the div via CSS to image1.gif. Then, you can use the CSS hover property to alter the div's background property to image2.gif.

[j4mes_bond25]

The site you reference, and the CSS-hover style, are for changing attributes the browser can actually change via CSS: fonts, colors, borders, etc.

The CSS specification/implementation doesn't allow for actually changing an image, as you seem to be asking. No "hover" or anything else you can do client-side is going to dynamically alter the "text" on your images.

You want to use old-fashioned image rollover code, if your buttons/links are going to be images.

Yes, this is exactly what I have in mind i.e. creat 2 different "images" one the normal & other the hover but how could I "hover" each INDIVIDUAL "li" on this menu ???

Afterall, in my style-sheet, I could have "li hover" OR "li a hover" but this "li" would be applicable for ALL the "li" i.e. Owner, Services, Contact, etc. but how do I go about having a code that allows me to have each INDIVIDUAL "li" (Owner, Services, Contact, etc.)

[j4mes_bond25]

Not true tgreer! ... Suppose you have image1.gif and image2.gif which are both 100x50 pixels in size. What you can do is create a <div> of that height and width, and fill it with a clear.gif filler. Set the background of the div via CSS to image1.gif. Then, you can use the CSS hover property to alter the div's background property to image2.gif.

So, you meant to say that I'd have to do this for EACH INDIVIDUAL images i.e. in my CSS I would have "owner img" AND "owner img hover", "service img" AND "service img hover", "contact img" AND "contact img hover", etc..

[tgreer]

Thanks, Dani (cscgal). I'd never thought of using a hover style to swap a background. <slapping head> brilliant!

James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.

[j4mes_bond25]

Thanks, Dani (cscgal). I'd never thought of using a hover style to swap a background. <slapping head> brilliant!

James: Yes, each LI. Instead of using a CSS class definition, you'd use a CSS "identity" definition. Give each LI element a unique ID. Have a corresponding CSS declaration, normal & hover.

Thanks for your help, however, I fear I'm constantly failing to achieve the desired result.

All my relevant files i.e. "style.css", "contact.php" and images in "topmenu" folder (second last in the list) can be seen on:

http://members.lycos.co.uk/darsh25/personal_website/

I've got two images now (can be seen from folder "topmenu") for the "About" link i.e. "about.jpg" (with little dark background) for the NORMAL view and "about1hover.jpg" (with brighter background) for the HOVER view.

The relevant code for this in CSS is:

#aboutLink a:hover
{
 background:url(topmenu/about1hover.jpg);
}

and the related HTML code is:

<div id="aboutLink"><a href="aboutus.php"><img src="topmenu/about.jpg" border="0"></a></div>

It's more like a SWAP of images where "about.jpg" gets swapped with "about1hover.jpg" when the mouse is hover over it.