Home/ Questions/Q 7939879
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T23:13:50+00:00

My Chrome seems to have some problems with hovering over a tr element inside

  • 0

My Chrome seems to have some problems with hovering over a tr element inside a table. Every other browser seems to work fine. (Chrome version 15.0.874.121 m).

I’m executing the event with jQuery (and yes, I need to use Javascript as I need to alter the table in realtime when the user hovers over it, so :hover is not an option, and even so, the problem seems to happen there as well).

Here’s the code in question:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da">
    <head>
        <title>:(</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("tr").hover(function () {
                    $(this).css("background-color", "#aaaaaa");
                }, function() {
                    $(this).css("background-color", "#555555");
                });
            });
        </script>
        <style type="text/css">
            table, table tr, table tr td {
                border: 0px;
                border-spacing: 0px;
                border-collapse: collapse;
                padding: 0px;
            }
            table {
                width: 500px;
            }
            table tr {
                background-color: #555555;
                color: #FFFFFF;
            }
            /*table tr:hover {
                background-color: #aaaaaa;
            }*/
        </style>
    </head>
    <body>
        <table>
            <tr><td>test1</td><td>this1</td><td>in1</td><td>chrome1</td></tr>
            <tr><td>test2</td><td>this2</td><td>in2</td><td>chrome2</td></tr>
            <tr><td>test3</td><td>this3</td><td>in3</td><td>chrome3</td></tr>
            <tr><td>test4</td><td>this4</td><td>in4</td><td>chrome4</td></tr>
            <tr><td>test5</td><td>this5</td><td>in5</td><td>chrome5</td></tr>
            <tr><td>test6</td><td>this6</td><td>in6</td><td>chrome6</td></tr>
            <tr><td>test7</td><td>this7</td><td>in7</td><td>chrome7</td></tr>
        </table>
    </body>
</html>

Here’s the code running on a webserver:

http://www.jalsoedesign.net/test/tabletest/tabletest.php

When hovering over the very end (or start) of the individual TD elements (even though the function uses the TR), it seems to call the “onmouseleave” javascript function. I’ve tried with onmouseover/onmouseout as well, and nothing seems to make a difference. Any ideas?

EDIT:

Figured it out. For some odd reason, adding a “position: relative” on the td element seems to fix it. I’m unaware of why this happens, so if anyone has a clue, feel free to give your input. 🙂

UPDATE 2013-02-28:

This does not seem to happen in current versions of Chrome.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As previously mentioned, but to not leave this answerless, the solution was to add a position: relative to all the TD elements.

    • 0