Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

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

    </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>&nbsp;</p>
    <p align=center>

    &nbsp;

    <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>&nbsp;</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>


    &lt;style&gt;<br>
    &lt;!--<br>
    input.keycap {font-size:10px; font-family:Arial,sans-serif; font-weight:bold;
    width:20px; height:20px;<br>
    filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#ffEEEEEE',EndColorS tr='#ff888888');<br>
    border-width:0px}<br>
    <br>
    --&gt;<br>
    &lt;/style&gt;<br>
    &nbsp;</p>
    <p align=center>


    &nbsp;</p>


    </BODY>

    </HTML>

  • #2
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    whatever:hover
    http://www.htmldog.com/articles/suckerfish/

    Please read Guidelines and Suggestions for Posting on Web Development Forums.
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    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.
    Last edited by Arbitrator; 06-06-2006 at 04:57 AM. Reason: corrected forum rendering error with double quotation marks
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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;
    filterrogidXImageTransform.Microsoft.Gradient(GradientType=1,StartColorStr='#ffEEEEEE',EndColorStr='#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>
    --

  • #5
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,372
    Thanks
    32
    Thanked 286 Times in 280 Posts
    Try this revised code:

    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>
    
    <!-- This Page Is Valid XHTML 1.0 Strict! -->
    
    <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>
    Last edited by Arbitrator; 06-06-2006 at 07:43 PM.
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #6
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    New to the CF scene
    Join Date
    May 2006
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Arbitrator

    Quote Originally Posted by ghandi
    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.

    Ghandi


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •