...

View Full Version : First Letter Color change on hover



RNorskov
11-20-2011, 02:08 PM
Hello, I am trying to make a menu in HTML/CSS, and I want to change the color of the first letter when I hover

My current HTML:


<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
</ul>

So I want is to change the color the H, P & A when I hover them.

How chan I achieve this?

VIPStephan
11-20-2011, 02:16 PM
Try this:


#nav a:hover:first-letter {color: red;}


I haven’t tested it, though.

RNorskov
11-20-2011, 02:24 PM
I just tried it out but unfortunately it doesn't work :(

Here is what it will spit out http://acozan.com/test.html

VIPStephan
11-20-2011, 02:43 PM
Sorry, :first-letter obviously only works on block elements so if you make your links display as block then it works.

RNorskov
11-20-2011, 02:50 PM
<!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>
<style type="text/css">
#nav a {display: block;}
#nav a:hover:first-letter {color: red;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
</ul>
</body>
</html>

With this code, it still does not work http://acozan.com/test.html

Amphiluke
11-20-2011, 03:33 PM
Try this:

#nav li:hover:first-letter { color:red; }

Hmm. Sorry, it works only in IE and Opera.

coothead
11-20-2011, 03:48 PM
Hi there RNorskov,

This works in Firefox 8, IE9 and Opera 11.52...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#nav a {
display:block;
color:#000;
}
#nav a:first-letter{
color:inherit;
}
#nav a:hover:first-letter{
color:#f00;
}
</style>

</head>
<body>

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
</ul>

</body>
</html>

.... but not in Safari 5.1.
As Google Chrome also uses webkit, I would presume it would not work in that browser either.

So for cross-browser compatibility, it may be safer to use this code instead...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
#nav a {
color:#000;
}
#nav a:hover span{
color:#f00;
}
</style>

</head>
<body>

<ul id="nav">
<li><a href="#"><span>H</span>ome</a></li>
<li><a href="#"><span>P</span>rojects</a></li>
<li><a href="#"><span>A</span>bout</a></li>
</ul>

</body>
</html>

coothead

RNorskov
11-20-2011, 04:30 PM
Thank you so much, I tell tell the first solution does work in chrome despite its webkit, but I went with the second solution so it would work in safari.

Thank you so much for your help you saved my day :)

coothead
11-20-2011, 06:51 PM
No problem, you're very welcome. ;)

VIPStephan
11-20-2011, 08:08 PM
I’m sorry, I have no idea why it was working before but isn’t now. But trying it again, for me in Firefox it is working if you set the list items and the links to display: block;. No need for a redundant span element.

RNorskov
11-20-2011, 11:33 PM
<!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>
<style type="text/css">
#nav a {display: block;}
#nav li {display: block;}
#nav a:first-letter:hover {color: red;}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>

</ul>
</body>
</html>

Doesn't work for me either



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum