Is there a way to change the text color on rollover for my buttons? Here is my code. I got one to work and then couldn't figure out how I did it. Now the home button is not doing it like it was.
Laramie
<!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=UTF-8" />
<title>index</title>
<link href="css/index_ssheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div class="background">
<div class="tmcc_heading"><img src="images/hor_black_lg.png" width="247" height="62" alt="tmcc_logo" /></div><!--end of tmcc heading-->
<div class="button_bar"><span class="certificates_button">Certificates</span><span class="instructors_button">Instructors</span><span class="gallery_button"><a href="#">Gallery</a></span><span class="courses_button"><a href="cources.html">Courses</a></span><a href="index.html" class="home_button">Home </a></div><!--end of button bar-->
</div><!--end of background-->
</div><!--end of h1 title-->
</div><!--end of container-->
</body>
</html>
text button roll over?
-
artgalstyle
- Posts: 121
- Joined: Mon Jan 23, 2012 8:19 pm
Re: text button roll over?
OK I got it to work by playing around but have and extra style in there. What to do. It works. Here is the 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=UTF-8" />
<title>index</title>
<link href="css/index_ssheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #000000;
}
a:hover {
color: #60D4CE;
}
</style>
</head>
<body class="home_button">
<div class="container">
<div class="background">
<div class="tmcc_heading"><img src="images/hor_black_lg.png" width="247" height="62" alt="tmcc_logo" /></div><!--end of tmcc heading-->
<div class="button_bar"><span class="certificates_button"><a href="#">Certificates</a></span><span class="instructors_button">I<a href="#">nstructors</a></span><span class="gallery_button"><a href="#">Gallery</a></span><span class="courses_button"><a href="#">Courses</a></span><a href="index.html" class="home_button">Home </a></div><!--end of button bar-->
</div><!--end of background-->
</div><!--end of h1 title-->
</div><!--end of container-->
</body>
</html>
<!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=UTF-8" />
<title>index</title>
<link href="css/index_ssheet.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a:link {
color: #000000;
}
a:hover {
color: #60D4CE;
}
</style>
</head>
<body class="home_button">
<div class="container">
<div class="background">
<div class="tmcc_heading"><img src="images/hor_black_lg.png" width="247" height="62" alt="tmcc_logo" /></div><!--end of tmcc heading-->
<div class="button_bar"><span class="certificates_button"><a href="#">Certificates</a></span><span class="instructors_button">I<a href="#">nstructors</a></span><span class="gallery_button"><a href="#">Gallery</a></span><span class="courses_button"><a href="#">Courses</a></span><a href="index.html" class="home_button">Home </a></div><!--end of button bar-->
</div><!--end of background-->
</div><!--end of h1 title-->
</div><!--end of container-->
</body>
</html>
Re: text button roll over?
Yes make a id rule named a:hover and set the text color to the desired color.
Which from the looks of things is what you have in your stylesheet. On the note of the styleheet, It looks like your a:hover style is embedded into your html doc. You may want to correct that by coping the style into your external style sheet in case if you want that particular style in future documents.
Which from the looks of things is what you have in your stylesheet. On the note of the styleheet, It looks like your a:hover style is embedded into your html doc. You may want to correct that by coping the style into your external style sheet in case if you want that particular style in future documents.
