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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2003
    Posts
    867
    Thanks
    4
    Thanked 8 Times in 8 Posts

    Onmouseover table cell changes link color

    Hello,

    I'm having trouble figuring out the hierarchy in order to change the color or background color of a link.

    <tr><td onmouseover="I_cannot_figure_out_what_goes_here.clsMenuItemIE.style.backgroundColor='red'"><a href="test.htm" class="clsMenuItemIE">link text</a></td></tr>

    To compound the problem, I am already setting the style in a style sheet and I don't know which takes precedence.

    <head>
    <style>
    all.clsMenuItemNS, .clsMenuItemIE {text-decoration: none; color: black;}
    </style>
    </head>

    Thanks for any help

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    The Netherlands
    Posts
    217
    Thanks
    0
    Thanked 0 Times in 0 Posts
    td:hover{background-color:red}

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Dallas, Texas
    Posts
    188
    Thanks
    0
    Thanked 0 Times in 0 Posts
    from http://www.w3schools.com/css/css_intro.asp


    Cascading Order
    What style will be used when there is more than one style specified for an HTML element?

    Generally speaking we can say that all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority:

    1. Browser default
    2. External Style Sheet
    3. Internal Style Sheet (inside the <head> tag)
    4. Inline Style (inside HTML element)

    So, an inline style (inside an HTML element) has the highest priority, which means that it will override every style declared inside the <head> tag, in an external style sheet, and in a browser (a default value).

  • #4
    Regular Coder
    Join Date
    Jan 2003
    Posts
    867
    Thanks
    4
    Thanked 8 Times in 8 Posts
    applesauce, thank you for straightening me out with the priorities.

    Bosko, I was unable to get hover working with a table cell. I can get it to work for a link (a:hover) but not with td:hover. Do you have any advice or does it look like I'm doing it wrong?

    <html>
    <head>
    <style>
    td:hover {background-color:red}
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td>Item 1</td>
    </tr>
    </table>
    </body>
    </html>

    I'm only concerned with IE5, but it didn't work in IE5 or NS4.76

    Thank you!

  • #5
    Senior Coder
    Join Date
    Jul 2002
    Posts
    1,628
    Thanks
    0
    Thanked 0 Times in 0 Posts
    shouldnt use hover psuedos on anything but anchors just yet. (and even then its better to use mouseovers)

    onmouseover="this.className='classname';"

    onmouseout="this.className='classname';"

    Moderator: General web building

    Get out from under them, resist and multiply.
    Get out from under precipice and see the sky.

  • #6
    Regular Coder
    Join Date
    Jan 2003
    Posts
    867
    Thanks
    4
    Thanked 8 Times in 8 Posts
    EDIT: nevermind I figured it out, THANK YOU!

    If anyone cares, I was using class instead of ID and class didn't work.

    <html>
    <body>
    <table>
    <tr>
    <td onMouseOver="buh.style.backgroundColor='red'">Item 1</td>
    </tr>
    </table>
    <a href="#" id="buh">buh</a>
    </body>
    </html>
    Last edited by arnyinc; 01-06-2003 at 06:37 PM.


  •  

    Posting Permissions

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