SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Why hover is not working

    Hello,

    We have a Table where we need to highlight a given row when the user holds their mouse over that row.

    I have added the CSS code:

    .tb_find {
    background: #FFFFFF;
    }

    .tb_find:hover {
    background: #C8DAEF;
    }



    and then added to the
    table <tr> definition:

    <tr bgcolor="#ffffff" class="tb_find">

    however the row is not changing background color when the mouse is held over the row!

    What do we need to do to correct this?

    Regards,

    Anoox search engine volunteer

    www.anoox.com

  2. #2
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    There isn't anything wrong from what I can see regarding that CSS :hover selector, so we'd need to see more of the markup and style sheet as it probably has other influences.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Hello,

    We have a Table where we need to highlight a given row when the user holds their mouse over that row.

    I have added the CSS code:


    .tb_find:hover {
    background: #C8DAEF;
    }

    and then added to the
    table <tr> definition:

    <tr bgcolor="#ffffff" class="tb_find">

    however the row is not changing background color when the mouse is held over the row!
    It's a nice and simple fix – you can't apply the hover effect background colour to a table row, only a table cell. So just change the line to:
    Code CSS:
    .tb_find:hover td {
    	background: #C8DAEF;
    }
    and you should find it works absolutely fine.

    (But why have you declared bgcolor="#ffffff" in the HTML instead of in the CSS?)

  4. #4
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Actually I found out that the Hover affect is working fine in many Web browsers, but not on all browser (versions).

    So question is what to do to get it working Ok in all browsers?

    You can see it by going to anoox.com and issue a search for whatever you want, such as: Web design Miami
    Then hold your mouse over each row of the search results.

    Depending on your web browser the background color will change fine.

    So again question is what to do to get it working Ok in all browsers?


    Quote Originally Posted by xhtmlcoder View Post
    There isn't anything wrong from what I can see regarding that CSS :hover selector, so we'd need to see more of the markup and style sheet as it probably has other influences.

    Anoox search engine volunteer

    www.anoox.com

  5. #5
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Stevie,

    Your suggestion would not work since each row has many columns and the result that we are looking for is when the user holds their mouse over any
    column of a row that that row changes background color.

    Anoox search engine volunteer

    www.anoox.com

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by WorldNews View Post
    So again question is what to do to get it working Ok in all browsers?

    ALL is too big a word.

    Which versions of which browsers are not working for you?



    The following code has been tested and found to WORK in the browsers listed at the top of the page:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    tr:hover changes the background-color of the entire row of table cells in the following browsers:
    IE8, IE9, FF3.6, FF19.0, Netscape 7.2, Chrome 25.0
    -->
    <head>
        <title>Table Tester</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    table {
        border:1px solid #000;
        margin:0 auto;
    }
    td {
        border:1px solid #080;
        background-color:#ccc;
        width:60px;
        height:60px;
    }
    tr:hover td {
        background-color:#fcc;
    }
    
        </style>
    </head>
    <body>
    
    <table>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    
    </body>
    </html>
    As you can see, Stevie's code works just fine.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,520
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by WorldNews View Post
    Stevie,

    Your suggestion would not work since each row has many columns and the result that we are looking for is when the user holds their mouse over any
    column of a row that that row changes background color.
    That's what the code does When a tr is hovered then all tds in that row change their background colour and will work in all but IE6.

  8. #8
    SitePoint Wizard WorldNews's Avatar
    Join Date
    Nov 2007
    Posts
    1,033
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    I am sorry, maybe I did not quite understand what you meant.
    Can you elaborate and give me the full text of your CSS code suggestion.

    Regards,

    Quote Originally Posted by Paul O'B View Post
    That's what the code does When a tr is hovered then all tds in that row change their background colour and will work in all but IE6.

    Anoox search engine volunteer

    www.anoox.com

  9. #9
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,599
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    WorldNews, did you try the code that I attached in message number 6 on a stand-alone page? It demonstrates exactly what Stevie and Paul have stated. It doesn't get any simpler than that.

    As @Paul O'B stated in message number 7, tr:hover does not work in IE6. Is that the problem browser?


Bookmarks

Posting Permissions

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