SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    Ribbit... Eric.Coleman's Avatar
    Join Date
    Jun 2001
    Location
    In your basement
    Posts
    1,268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Making a CSS Hover...

    Hello,

    I have a form submit button, and I want it to change colors...

    i have something like this

    Code:
    .Submit {
    	font-size 1;
    	background-color: #ffffff;
    	border-color: #000000;
    	border-style: solid;
    	border-width: 1px;
    	color: #000000;
    	font-size: 10px;
    	font-family: Verdana;
    	cursor : hand;
    }
    .SubmitChange {
    	font-size 1;
    	background-color: #000000;
    	border-color: #ffffff;
    	border-style: solid;
    	border-width: 1px;
    	color: #ffffff;
    	font-size: 10px;
    	font-family: Verdana;
    	cursor : hand;
    }
    When the page loads, I want the button to be on the 'Submit' class, and when you hover over it, change to 'SubmitChange' (when you mouse out, it changs back to Submit).

    Is this possible with JS or Css? And if So, how can I accomplish this.

    Thanks,
    Eric
    Eric Coleman
    We're consentratin' on fallin' apart
    We were contenders, now throwin' the fight
    I just wanna believe, I just wanna believe in us

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    First, change your code to this:
    Code:
    .submit {
      background: #ffffff;
      border: 1px solid #000000;
      color: #000000;
      cursor: hand;
      font-family: verdana, arial, helvetica, sans-serif;
      font-size: 10px;
    }
    I just fixed it up a little for you.

    Second, visit this page to see code and an example of what you want to do. You might have to modify that script a bit, but it isn't too hard to do at all.

  3. #3
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You've probably going to go for DHTML (JavaScript + CSS) in the end, but I just want to tell you it's possible in plain CSS (though not that well supported, currently).

    Go ahead an fire up Mozillia or Netscape 6 to check it out.
    Code:
    .button {
      background: #fff;
      border: 1px solid #000;
      color: #000;
      cursor: pointer; /* "hand" is IE specific and isn't part of the spec */
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
    }
    
    .button:hover {
      background-color: #000;
      border-color: #fff;
      color: #fff;
    }
    and that should work (I haven't tested it so don't get upset if it doesn't ;-) for 'ya.

    Code that's Sweet and Simple: CSS. :-D

    ~~Ian

  4. #4
    What? Maelstrom's Avatar
    Join Date
    Oct 2001
    Location
    Whistler BC originally from Guelph Ontario
    Posts
    2,175
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In case you are curious here is a quick mockup of how js would do it using the dom and css

    <input style="background-color:'blue'" type="submit" name="test" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='blue'">

    Maelstrom Personal - Apparition Visions
    Development - PhP || Mysql || Zend || Devshed
    Unix - FreeBSD || FreeBsdForums || Man Pages
    They made me a sitepoint Mentor - Feel free to PM me or Email me and I will see if I can help.

  5. #5
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Maelstrom,

    What about changing the id or class instead of a property?

  6. #6
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the <head>:
    Code:
    <style type="text/css">
    <!--
    .hover {
      background: #808080;
      border: 1px solid #000;
      color: #fff;
      font: bold 11px verdana, arial, helvetica, sans-serif;
      padding: 5px;
    }
    
    .normal {
      background: #dcdcdc;
      border: 1px solid #000;
      color: #000;
      font: 11px verdana, arial, helvetica, sans-serif;
      padding: 5px;
    }
    -->
    </style>
    In the <body>:
    Lines broken with a > for readability.
    Code:
      <input type="submit" value="something neat" 
    > onmouseover="this.className='hover'" 
    > onmouseout="this.className='normal'" class="normal" />
    Last edited by mattjacob; Apr 21, 2002 at 23:56.

  7. #7
    .net install meltdown
    Join Date
    May 2001
    Location
    View Ridge
    Posts
    692
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Battabing...epiphany

    thanks for the tip matt.
    Last edited by isotope235; Apr 22, 2002 at 00:06.

  8. #8
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sure thing, glad to help. But I should mention that it, of course, won't work in Opera due to the crappy DOM support. IE and Mozilla are fine, though, so code away!

  9. #9
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, one last thing is that if anyone is in need of a good DOM reference guide, look no further.

  10. #10
    SitePoint Wizard Ian Glass's Avatar
    Join Date
    Oct 2001
    Location
    Beyond yonder
    Posts
    2,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by mattjacob
    Sure thing, glad to help. But I should mention that it, of course, won't work in Opera due to the crappy DOM support.
    Also, it'd be moot if it did since Opera doesn't seem to support backgrounds and borders properly on buttons. :-(

    They will someday though. ;-)

    ~~Ian

  11. #11
    Ribbit... Eric.Coleman's Avatar
    Join Date
    Jun 2001
    Location
    In your basement
    Posts
    1,268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, this worked perfectly
    Eric Coleman
    We're consentratin' on fallin' apart
    We were contenders, now throwin' the fight
    I just wanna believe, I just wanna believe in us

  12. #12
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I was gonna ask if you had any more questions about it, but I guess you figured it out.


Bookmarks

Posting Permissions

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