dcsimg
www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] rollover for table rows

  1. #1
    Join Date
    Oct 2004
    Location
    Miamisburg, OH
    Posts
    39

    resolved [RESOLVED] rollover for table rows

    I am working on the admin for a client's site, and I'd like to add in the option where the table rows change color when you mouseover them. I've seen it on a few different sites, but each seemed to be using different methodologies. Does anyone know of one quick, concise way to do that?

    I'd like to add the onMouseOver and onMouseOut commands in the <TR> tag, if possible. I am also using the CSS attribute class="bg1" or class="bg2" on my <TR> tags and then in my style sheet is have:

    tr.bg1 td {
    background-color: #e1e1e1;
    border: 1px solid #ebebeb;
    }
    tr.bg2 td {
    background-color: #fff;
    border: 1px solid #ebebeb;
    }

    Anyone out there know some CSS / JavaScript combo I can add in to override the colors when one rolls the mouse over any cell in the row?


    Thanks,

    Shaun

  2. #2
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    tr.bg1 td {
    background-color: #e1e1e1;
    border: 1px solid #ebebeb;
    }
    tr.bg2 td {
    background-color: #fff;
    border: 1px solid #ebebeb;
    }
    tr.bg1 td:hover {
    background-color: #000000;
    border: 1px solid #ebebeb;
    }
    tr.bg2 td:hover {
    background-color: #000000;
    border: 1px solid #ebebeb;
    }

  3. #3
    Join Date
    Oct 2004
    Location
    Miamisburg, OH
    Posts
    39
    Well, that does indeed work in Firefox for me, but not in IE. And it changes the background color of each individual cell, not the row as a whole on rollover. I'd like a way to select the checkbox in that row when one clicks anywhere on the given row as well.


    Thanks,

    Shaun

  4. #4
    Join Date
    Jun 2003
    Location
    here
    Posts
    4,551
    that requires javascript.

    <tr onmouseover="this.bgcolor='#FF0000'" onmouseout="this.bgcolor='#000000';" onclick="chkboxN.checked = true;"><td><input type="checkbox" name="chkboxN" /></td></tr>

  5. #5
    Join Date
    Oct 2004
    Location
    Miamisburg, OH
    Posts
    39
    Thanks!! And for the rollover on the row as a whole, I used this:

    tr.bg1:hover td, tr.bg2:hover td, tr.bg3:hover td, tr.bg4:hover td {
    background-color: #e7dcc9;
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles