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 Coder
    Join Date
    Apr 2004
    Location
    Texas
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem using classes

    CSS classes

    Code:
    .btnav { background-color: #C0C0C0; border: 1px #000000 solid;}
    .btnOver { background-color: #64BCCE; border: 1px #000000 solid;}
    HTML stuff

    This works

    Code:
      
            <td class="btnav" onmouseover="style.backgroundColor='#64BCCE';"
    	onmouseout="style.backgroundColor='#C0C0C0'" width="20%" >
                <div align="center"><a href="services.html">Services</a></div>
              </td>

    But this doesn't
    Code:
              <td class="btnav" onmouseover="class='btnOver'"
    			    onmouseout="class='btnav'">
                <div align="center"><a href="pricing.html" target="_blank">Pricing</a></div>
              </td>

    I want to control this with a stylesheet, not inline style tags, any ideas what I'm doing wrong? I'm new to this, so be gentle...hehe.
    Jason B

  • #2
    cfc
    cfc is offline
    Regular Coder
    Join Date
    Dec 2004
    Location
    Keswick, Ontario
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <td class="btnav" onmouseover="this.class='btnOver'" onmouseout="this.class='btnav'">
        <div align="center">
            <a href="pricing.html" target="_blank">Pricing</a>
        </div>
    </td>

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    :hover?

    Have you people ever heard of the :hover pseudoclass...?
    Code:
    .btnav {background-color: #C0C0C0; border: 1px #000000 solid;}
    .btnav:hover {background-color: #64BCCE;}
    No scripting needed!

    Admittedly, this only works in standards compliant browsers; for IE, a fix for supporting the :hover pseudoclass on other elements besides a is needed, for example Peter Nederlof's whatever:hover behaviour script. Okay, a little bit of script is needed after all.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    cfc
    cfc is offline
    Regular Coder
    Join Date
    Dec 2004
    Location
    Keswick, Ontario
    Posts
    251
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ronaldb66
    Have you people ever heard of the :hover pseudoclass...?
    Yep, and I have used it in all of my (dropped) designs thus far for my undeveloped site. While JavaScript is overkill for rollovers in Firefox it is much simpler than HTML Behaviours, which I believe should be completely unsupported by the internet.

  • #5
    Senior Coder whizard's Avatar
    Join Date
    Jan 2005
    Location
    Philadelphia, PA, USA
    Posts
    1,662
    Thanks
    14
    Thanked 76 Times in 76 Posts

    Unhappy

    whats so bad about behaviors?

    use the whatever:hover hack (see above) which works fine, and you're set to go!

    Dan
    PHP Tip: If you want to use short tags (<? or <?=$var) then make sure short_open_tag is set to "1". It really helps.

    Don't forget to save everyone time and mark your thread as Resolved :)

    "Also note that it is your responsibility to die() if necessary."

    DON'T USE THE MYSQL_ EXTENSION

  • #6
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the property is this.className btw.
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #7
    New Coder
    Join Date
    Apr 2004
    Location
    Texas
    Posts
    60
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks for the help and direction.
    Jason B


  •  

    Posting Permissions

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