Form Buttons Hover

**Rockonmetal** · 03-27-2007, 09:14 PM

How do you change the color of the form button on the hover, i know how to do it on the static *when the mouse is not on it*

its CSS. here is what i have in the head (its all related to the button)

HTML Code:

<style type="text/css">
/*IBW DESIGN */
/*MUST STAY IN CONTACT FOR USE! */
.menu{
	background-color: #777777;
	color: 000000;
	font-family: Tahoma;
	font-size: 14px;
	width: 300px;
}
.menu input{
	background-color: #888888;
	border: 0px;
	color: 000000;
	font-family: Tahoma;
	font-size: 14px;
}
.menu input:mouseover{
	background-color: #000000;
	border: 0px;
	color: 000000;
	font-family: Tahoma;
	font-size: 14px;
}
</style>

**thetestingsite** · 03-28-2007, 01:40 AM

Not 100% sure on this, but shouldn't this part (the one in red):

Code:

.menu input:mouseover{
	background-color: #000000;
	border: 0px;
	color: 000000;
	font-family: Tahoma;
	font-size: 14px;
}

be set as "hover" (without the quotes)?
Hope this helps.

**jscheuer1** · 03-28-2007, 03:04 AM

That's right, thetestingsite:

Code:

.menu input:hover {
	background-color: #000000;
	border: 0px;
	color: #000000;
	font-family: Tahoma;
	font-size: 14px;
}

And just to be safe, add the space before the brace as shown. However, this will not work for IE 6 and earlier. But, you can use javascript onmouseover and onmouseout events for those browsers if you like, or just not worry about them as, they are being phased out.

One more thing, with both the color and background-color #000000, the text (if any) will 'disappear' onmouseover.

**Rockonmetal** · 03-28-2007, 05:25 PM

Thanks, I knew the text would dissapear, it was just in the testing stage.

BTW For some reason it doesn't work in IE 7, But it works in Fire Fox, Microsoft jeese, they can't do anything right, except for making computers,

**mburt** · 03-28-2007, 06:08 PM

In IE, the hover class does not work. The only alternative for this is javascript.

**boxxertrumps** · 03-28-2007, 06:10 PM

Microsoft doesn't sell any actual hardware.
Just under-par software.

but IE is a pain in the neck for most people who make web pages, ive tried to make up for it on my site (here), but for some reason hr elements are styled differently in ie then gecko/khtml browsers.
also the fact that it refuses to be postitioned/given colored borders/margins...

i should try an empty div <div /> and see if it works the same...

Edit: Not even close...

**jscheuer1** · 03-28-2007, 06:40 PM

It should work in IE 7, this does:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
input:hover {
color:red;
background-color:black;
}
</style>
</head>
<body>
<input type="button" value="hi">
</body>
</html>

But! The DOCTYPE is required!!

**Sparaker** · 03-28-2007, 07:55 PM

Yeah running the webpage in quirks mode is not an option for stuff like this.

Thread: Form Buttons Hover

Thread Tools

Search Thread

Form Buttons Hover

Bookmarks

Bookmarks

Posting Permissions