CSS and javascript interaction

Discussion in 'Javascript' started by RHO, Sep 25, 2003.

  1. RHO

    RHO Guest

    Hi,

    I have a table with alternating bg-colors and in which I highlight the row
    focused by the mouse. This is achieved by

    <TR bgcolor='#A7BCCF' onmouseout="this.bgColor = '#A7BCCF'"
    onmouseover="this.bgColor = '#86B1DC'">
    <TD> Something ...
    <TR bgcolor='#B8CADA' onmouseout="this.bgColor = '#A7BCCF'"
    onmouseover="this.bgColor = '#86B1DC'">
    <TD> Something else ...

    THis works fine. If however I use CSS <TD class='myclass'> the
    onmouseXXX-effect disappears. Any suggestions as how to resolve this ?

    RHO
    RHO, Sep 25, 2003
    #1
    1. Advertising

  2. RHO

    Dom Leonard Guest

    RHO wrote:
    > Hi,
    >
    > I have a table with alternating bg-colors and in which I highlight the row
    > focused by the mouse. This is achieved by
    >
    > <TR bgcolor='#A7BCCF' onmouseout="this.bgColor = '#A7BCCF'"
    > onmouseover="this.bgColor = '#86B1DC'">


    Okay, you are coding mouseout/mouseover handlers to set bgColor values.
    The last time I looked, these are *deprecated* in HTML 4.

    > <TD> Something ...
    > <TR bgcolor='#B8CADA' onmouseout="this.bgColor = '#A7BCCF'"
    > onmouseover="this.bgColor = '#86B1DC'">
    > <TD> Something else ...
    >
    > THis works fine. If however I use CSS <TD class='myclass'> the
    > onmouseXXX-effect disappears. Any suggestions as how to resolve this ?


    AFIK, the bgColor attributes are from HTML 3, whilst the class attribute
    is from HTML 4. This brings into question the notion of specificity.
    From your description (untested), the class attribute is taking
    precendence over setting values for bgColor which has been replaced by
    "background-color" in CSS.

    For HTML 4, try something like:

    <table>
    <TR style="background-color: #B8CADA;"
    onmouseout="this.style.backgroundColor = '#A7BCCF'"
    onmouseover="this.style.backgroundColor = '#86B1DC'">
    <TD> whatever
    </TD>
    </TR>
    </table>

    Normally style attributes of an element have higher specificity than
    class name rules for the same element.

    HTH,

    Dom
    Dom Leonard, Sep 29, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. David Virgil Hobbs
    Replies:
    0
    Views:
    511
    David Virgil Hobbs
    Jan 6, 2004
  2. =?Utf-8?B?SXJmYW4gQWtyYW0=?=

    Javascript Interaction with asp.net controls

    =?Utf-8?B?SXJmYW4gQWtyYW0=?=, Jan 16, 2005, in forum: ASP .Net
    Replies:
    7
    Views:
    2,872
  3. James Britt
    Replies:
    6
    Views:
    222
    James Britt
    Mar 4, 2005
  4. James Howe

    Browser/JavaScript Interaction

    James Howe, Sep 13, 2003, in forum: Javascript
    Replies:
    0
    Views:
    79
    James Howe
    Sep 13, 2003
  5. Scamjunk

    JavaScript for User interaction.

    Scamjunk, Apr 28, 2006, in forum: Perl Misc
    Replies:
    2
    Views:
    101
Loading...

Share This Page