...

View Full Version : Newbie Question about a:hover



webnation
09-30-2007, 10:26 PM
Hello,
I have text in a div id in an unordered list. All of the test are links. So the css sheet reads something like the following


<div id = "links">
<ul><li><a href="http:www.somesite.com" target = "blank">somesite.com</a></li>


So my question is where do I place a:hover {color:#FF0000;} , if that is the code , so that all the links turn red on hover?
Thank you, Diane

Mwnciau
09-30-2007, 10:36 PM
You have to put pseudo classes in either a stylesheet or within <style> tags:


<html><head>
<style type="text/css">
a:hover {
color:#ff0000;
}
</style>
</head>
<body>
<div id = "links">
<ul><li>
<a href="http:www.somesite.com" target = "blank">somesite.com</a>
</li>
</ul>
</body>
</html>

vtjustinb
09-30-2007, 10:38 PM
You can place rules such as "a:hover { color: #f00; }" in one of two places:

in between the <head> section of the html file, such as:


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

Or you could put the "a:hover { color: #f00; }" in a file such as "style.css" and link to it in the same <head> section with a <link> tag, such as:


<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

webnation
09-30-2007, 11:10 PM
Hello, I appreciate the very quick replies but I am still not sure where to put the tags. I tried putting it at the top of the css style sheet but that moved the div far away from where I had placed it. I have tried putting the code after the id tag, that does nothing. The id class on the css style sheet reads as follows

#links
{font-family:"Times Roman;
font-size:12 px;
font-weight: normal;
left:291px;
top:140px;
line-height:20px;width:393px;
list-style-position:outside;
list-style-type:circle;}
so exactly where do I place the hover code?
Thanks again, Diane

jlhaslip
09-30-2007, 11:15 PM
In your style sheet:


#links
{font-family:"Times Roman;
font-size:12 px;
font-weight: normal;
left:291px;
top:140px;
line-height:20px;width:393px;
list-style-position:outside;
list-style-type:circle;}

#links ul li a {
<< put link style here; >>
}
#links ul li a:hover {
<< put on:hover link style here; >>
}



Replace the red lines with valid style information

:)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum