Jump to content

Looking for a variation on a rollover button

Bonmot

By Bonmot
in CSS

Recommended Posts

Bonmot Newbie

Bonmot

Posted
Posted

Hi and thanks for looking into this.I have this rollover pretty close to working. Only trouble is, they are required to be white text on green when "un-moused" and then green text on white on rollover. I can get the boxes to change color but can't seem to figure out a way to get the text color to change. Any ideas? http://sandbox.intermediawebdesign.com/BayState/home.html(Oh, also ignore the white menu items: They're just part of a temporary background image. They go bye-bye soon).Thanks very much!

@charset "utf-8";/* CSS Document */#container {	height:1000px;	width:100%;		position:relative;	text-align:center;	} .cssnav{	position: relative;	font-family: arial, helvetica, sans-serif;	background: url(ButtonUP.jpg) no-repeat;	left:263px;	top:160px;	white-space: nowrap;	display: block;	width: 250px;	height: 15px;	margin: 0;	padding: 0;	z-index:9;	}	.cssnav a{display: block;color: #000;font-size: 12px;width: 250px;height: 15px;display: block;float: left;text-decoration: none;}.cssnav img{width: 250px;height: 15px;border: 0}* html a:hover{visibility:visible;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#008193;z-index:20;}.cssnav a:hover img{visibility:hidden}.cssnav span{position: absolute;left: 30px;top: 0px;margin: 0px;padding: 0px;cursor: pointer;height:15px;width:250px;text-align:left;}

<!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>Bay State Laundry - Welcome!</title><link href="style.css" rel="stylesheet" type="text/css" /><!--[if lte IE 6]>    <link rel="stylesheet" type="text/css" href="IEstyle.css" /><![endif]--><style type="text/css">body { background: #00529B url(BG.jpg) center top no-repeat;}</style> </head><body><div class="cssnav"><a href="http://www.URL.com" title="Services"><img src="ButtonHOVER.jpg" alt="Services"/><span>Services</span></a></div><div class="cssnav"><a href="http://www.URL.com" title="Athletic Clubs"><img src="ButtonHOVER.jpg" alt="Athletic Clubs"/><span>Athletic Clubs</span></a></div><div id="container"></div></body></html>

Link to comment
Share on other sites
webspider25 Newbie

webspider25

Posted
Posted

Hi,To change the color of the text u have to just do the minor changes......cssnav a{display: block;color: #fff;To change font-color to whitefont-size: 12px;width: 250px;height: 15px;display: block;float: left;text-decoration: none;}* html a:hover{visibility:visible;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff;Here Put the color u want on hovering(I have given black color)z-index:20;}BYE

Hi and thanks for looking into this.I have this rollover pretty close to working. Only trouble is, they are required to be white text on green when "un-moused" and then green text on white on rollover. I can get the boxes to change color but can't seem to figure out a way to get the text color to change. Any ideas? http://sandbox.intermediawebdesign.com/BayState/home.html(Oh, also ignore the white menu items: They're just part of a temporary background image. They go bye-bye soon).Thanks very much!
@charset "utf-8";/* CSS Document */#container {	height:1000px;	width:100%;		position:relative;	text-align:center;	} .cssnav{	position: relative;	font-family: arial, helvetica, sans-serif;	background: url(ButtonUP.jpg) no-repeat;	left:263px;	top:160px;	white-space: nowrap;	display: block;	width: 250px;	height: 15px;	margin: 0;	padding: 0;	z-index:9;	}	.cssnav a{display: block;color: #000;font-size: 12px;width: 250px;height: 15px;display: block;float: left;text-decoration: none;}.cssnav img{width: 250px;height: 15px;border: 0}* html a:hover{visibility:visible;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#008193;z-index:20;}.cssnav a:hover img{visibility:hidden}.cssnav span{position: absolute;left: 30px;top: 0px;margin: 0px;padding: 0px;cursor: pointer;height:15px;width:250px;text-align:left;}

<!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>Bay State Laundry - Welcome!</title><link href="style.css" rel="stylesheet" type="text/css" /><!--[if lte IE 6]>    <link rel="stylesheet" type="text/css" href="IEstyle.css" /><![endif]--><style type="text/css">body { background: #00529B url(BG.jpg) center top no-repeat;}</style> </head><body><div class="cssnav"><a href="http://www.URL.com" title="Services"><img src="ButtonHOVER.jpg" alt="Services"/><span>Services</span></a></div><div class="cssnav"><a href="http://www.URL.com" title="Athletic Clubs"><img src="ButtonHOVER.jpg" alt="Athletic Clubs"/><span>Athletic Clubs</span></a></div><div id="container"></div></body></html>

Link to comment
Share on other sites
Bonmot Newbie

Bonmot

Posted
  • Author
Posted
Hi,To change the color of the text u have to just do the minor changes......cssnav a{display: block;color: #fff;To change font-color to whitefont-size: 12px;width: 250px;height: 15px;display: block;float: left;text-decoration: none;}* html a:hover{visibility:visible;font-family:Arial, Helvetica, sans-serif;font-size:12px;color:#fff;Here Put the color u want on hovering(I have given black color)z-index:20;}BYE
Well, that's about how I have it (just different colors). Thing is, the font color doesn't change on hover. It always stays the color specified in ".cssnav a"
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...