How do I hover a <input type="button" ..>

ghandi

06-06-2006, 01:57 AM

I would like my buttons to have a red border on hover, They are
< input type="button" ... > buttons

----

<title>Bowling Pin Button Problem</title>

<style>

</style>

</head>

<body>

<p align=center>

CSS Bowling Pin Button Problem<br>
( Can not get Hover to highlight the border )</p>
<p align=left>

Using the CSS Style for these buttons, <br> </p>
<p align=center>

 

<input type="button" value="6" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" >

<input type="button" value="7" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" >

<input type="button" value="8" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" >

<input type="button" value="9" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ><br>

<input type="button" value="4" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" >

<input type="button" value="5" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" >

<input type="button" value="6" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ><br>

<input type="button" value="2" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" >

<input type="button" value="3" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ><br>

<input type="button" value="1" onclick="addChar(this.value)" class="keycap" style="width: 20; height: 20; border-left-style:outset; border-left-width:1px; border-top-style:outset; border-top-width:1px" ></p>

<p align=center> </p><p align=left>

I would like to make the Buttons above function like the one below ( Hover with
Red border) but with CSS embedded. <br>
Not CSS inline as
shown on the Button below</p><p align=center>

<input onmouseover="this.style.border='1px solid red'" onmouseout="this.style.border='1px solid #CCCCCC'" type="image" name="Example"></p>
<p align=left>

<style><br>
<br>
</style><br>
 </p>
<p align=center>

 </p>

</BODY>

</HTML>

Kravvitz

06-06-2006, 02:19 AM

IE(4 through 6)/Win only natively support :hover on <a> elements.
Three ways to simulate :hover in IE5-6/Win:
Dean Edwards' "IE7" patch for IE5-6 (http://dean.edwards.name/IE7/)
whatever:hover (http://www.xs4all.nl/~peterned/csshover.html)
http://www.htmldog.com/articles/suckerfish/

Please read Guidelines and Suggestions for Posting on Web Development Forums (http://www.dynamicsitesolutions.com/other/forum_posting_guidelines/).

Arbitrator

06-06-2006, 03:26 AM

The CSS you would use is input[type="button"]:hover {border: 1px solid #f00;}. The caveat is that the :hover pseudo-class and attribute selectors aren't supported in the latest version of Internet Explorer (6). The :hover pseudo-class is subject to one exception, however: it works on anchor elements; that won't really help you here though unless you want to use an image surrounded by an anchor as a button. Just FYI: both will be supported in Internet Explorer 7 but who knows when that'll be released.

ghandi

06-06-2006, 04:03 PM

Thank you Kravvitz & Arbitrator
I was hoping that it was not a deadend road, I was trying to avoid using js by using pure css. [Arbitrator: thanks for the IE7 update]
By trying a different road with using js from 'CSS Button Designer' , I can make the effect but need to add inline OnMouseOver/Out to the string.
Also I seem to loose my embedded CSS width & height.
Can this be modified so the <form> </form> tags are removed ?

code:

<title>Bowling Pin Problem</title>

<style type="text/css">

input.keycap
{font-size:10px; font-family:Arial,sans-serif; font-weight:bold; width:20px; height:20px;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#ffEEEEEE',EndColorS tr='#ff888888');
border-width:0px}

</style>

<script language="javascript">

function goLite(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "#FF0000";
window.document.forms[FRM].elements[BTN].style.borderColor = "#FF0000";
window.document.forms[FRM].elements[BTN].style.border = "1px solid #f00";
}

function goDim(FRM,BTN)
{
window.document.forms[FRM].elements[BTN].style.color = "";
window.document.forms[FRM].elements[BTN].style.borderColor = "";
window.document.forms[FRM].elements[BTN].style.border = "";

}

</script>

</head>

<body>

<form name="keycap">
<p align="center">
<input type="button" name="groovybtn1" class="keycap" value="1"
onMouseOver="goLite(this.form.name,this.name)"
onMouseOut="goDim(this.form.name,this.name)" style="width: 20; height: 20">
</p>
</form>

</body>

</html>
--

Arbitrator

06-06-2006, 06:41 PM

Try this revised code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html lang="en">
<head>



<meta http-equiv="content-type" content="text/html; charset = utf-8"/>

<title>Bowling Pin Button Problem</title>

<style type="text/css">
#keycap {
text-align: center;
}
#keycap #groovybtn1 {
width: 20px;
height: 20px;
border: 0;
font: bold 10px Arial, Helvetica, sans-serif;
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType = 1, StartColorStr = "#ffeeee", EndColorStr = "#ff8888"); /* MSIE Filter */
}
</style>

<script type="text/javascript">
function goLite(button) {
button.style.border = "1px solid #f00";
button.style.color = "#f00";
}
function goDim(button) {
button.style.border = "";
button.style.color = "";
}
</script>

</head>
<body>

<div id="keycap">
<input id="groovybtn1" type="button" value="1" onmouseover="goLite(this);" onmouseout="goDim(this);"/>
</div>

</body>
</html>

ghandi

06-07-2006, 01:39 AM

That works perfect! (reduced fat – DTD XHTML is like skim milk)
Thanks Arbitrator, give me a 48hrs to apply this, and I’ll show you what we got.
:)

ghandi

06-08-2006, 08:38 PM

That works perfect! (reduced fat – DTD XHTML is like skim milk)
Thanks Arbitrator, give me a 48hrs to apply this, and I’ll show you what we got.
:)

Arbitrator,
The file is ready, please send a message via this forum with email address to send it too.
:thumbsup:
Ghandi