Newbie Question about a:hover

webnation · 09-30-2007, 09: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, 09:36 PM

You have to put pseudo classes in either a stylesheet or within <style> tags:

PHP Code:


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

Code:

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

Code:

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

webnation · 09-30-2007, 10: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

utside;
list-style-type:circle;}
so exactly where do I place the hover code?
Thanks again, Diane

jlhaslip · 09-30-2007, 10:15 PM

In your style sheet:

Code:

#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