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 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2003
    Location
    Stockholm, Sweden
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts

    changing bacground-color with onMouseOver/Out in css?

    Hi,

    I want a whole line in a table to change background-color
    when moving the mouse over a cell in that line.

    right now I use this code:

    Code:
    <tr id="index" style="background-color:#FFFFFF;" onMouseOver="this.style.background='#CCCCCC';" onMouseOut="this.style.background='#FFFFFF';">
    and it works just fine but now I want it in an .css file that I
    include in my page but I can't get it to work.

    I tried this:

    Code:
    TR.index
      {
      background-color: #FFFFFF;
      }
    TR.index.onMouseOver
      {
      background-color: #CCCCCC;
      }
    I also tried with TR.index.hover instead of onMouseOver
    but that didn't work either.

    Anyone that has a clue what to do?

    Thanks in advance
    /Speedy
    Last edited by Speedy; 08-02-2004 at 01:04 PM.

  • #2
    Regular Coder
    Join Date
    May 2003
    Location
    Stockholm, Sweden
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops!...

    ...I didn't see the HTML & CSS forum.

    nevermind this question I'll post it in there instead
    sorry.

    /Speedy

  • #3
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Actually - I'll answer for you here because there's no direct CSS answer. Mozilla supports the :hover pseudo-class on arbitrary elements, whereas IE only supports it for anchor tags. So, what to do? I think the best solution is a transparent one. Let Mozilla use the :hover, and provide a DHTML behavior for IE

    First, the CSS
    Code:
    TR.index
      {
      background-color: #FFFFFF;
      behavior: url(/js/tr.index.htc);
      }
    TR.index:hover
      {
      background-color: #CCCCCC;
      }
    Then, tr.index.htc
    Code:
    <public:component>
        <public:attach event="onmouseover" onevent="overHandler()" />
        <public:attach event="onmouseout" onevent="outHandler()" />
    
        <script language="JScript">
            function overHandler()
            {
                element.runtimeStyle.backgroundColor = '#CCCCCC';
            }
            function outHandler()
            {
                element.runtimeStyle.backgroundColor = '';
            }
        </script>
    </public:component>
    That should do it
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #4
    Regular Coder
    Join Date
    Jul 2002
    Posts
    698
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is my suggestion


    table rows look like this:

    Code:
     
    <tr class="tr1" onMouseOver="this.className='tr';" onMouseOut="this.className='tr1';">

    put this in your style sheet.
    Code:
     
    .TR
      {
      background-color: #FFFFFF;
      behavior: url(/js/tr.index.htc);
      }
    .TR1
      {
      background-color: #CCCCCC;
      }

  • #5
    Regular Coder
    Join Date
    May 2003
    Location
    Stockholm, Sweden
    Posts
    107
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks beetle and Garadon,

    Now it works

    /Speedy


  •  

    Posting Permissions

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