Chrome: кажется, чтобы добавить невидимую границу при наведении на tr - PullRequest
Новая
       18

Chrome: кажется, чтобы добавить невидимую границу при наведении на tr

2 голосов
/ 14 декабря 2011

У моего Chrome, кажется, есть некоторые проблемы с наведением курсора на элемент tr внутри таблицы.Кажется, любой другой браузер работает нормально.(Версия Chrome 15.0.874.121 m).

Я выполняю событие с помощью jQuery (и да, мне нужно использовать Javascript, поскольку мне нужно изменять таблицу в реальном времени, когда пользователь наводит на нее курсор, поэтому:hover не является опцией, и даже в этом случае проблема, похоже, возникает и там).

Вот код, о котором идет речь: 

<!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>

Вот код, работающий на веб-сервере:

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

При наведении курсора на самый конец (или начало) отдельных элементов TD (даже если функция использует TR), кажется, вызывается функция javascript «onmouseleave».Я пробовал и с onmouseover / onmouseout, но, похоже, ничего не изменилось.Есть идеи?

РЕДАКТИРОВАТЬ:

Разобрался.По какой-то нечетной причине добавление «position: относительный» к элементу td, кажется, исправляет это.Я не знаю, почему это происходит, поэтому, если у кого-то есть подсказка, не стесняйтесь высказать свое мнение.:)

ОБНОВЛЕНИЕ 2013-02-28:

В современных версиях Chrome такого не происходит.

1 Ответ

2 голосов
/ 14 мая 2012

Как уже упоминалось ранее, но чтобы не оставить это без ответа, решением было добавить position: relative ко всем элементам TD.

...