CSS Hover ParentChild Предметы - PullRequest
Новая
       5

CSS Hover ParentChild Предметы

1 голос
/ 30 ноября 2009

Я пытаюсь настроить стиль CSS, чтобы выделить ячейку таблицы во вложенной таблице при наведении на нее таблицы.

См. Пример кода ниже ..... 

<html>
    <head>
        <style type='text/css'>
        table
        {
            border: solid 1px black;
        }

        table.Content:hover td.ContentIndent
        {
            background-color: #AAAAAA;
        }
        </style>
    </head>
    <body>
        <table class="Content">
            <tr>
                <td class="ContentIndent">Root Indent, could be highlighted when this table is moused over</td>
                <td>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 1 - Should be highlighted only when this table is moused over</td>
                            <td>Content 1 - Indent 1 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                    <table class="Content">
                        <tr>
                            <td class="ContentIndent">Indent 2 - Should be highlighted only when this table is moused over</td>
                            <td>Content 2 - Indent 2 should be highlighted when this table is moused over</td>
                        </tr>
                    </table>
                </td>
            <tr>
        </table>
    </body>
</html>

Обычно, когда одна из дочерних таблиц наведена, я бы хотел, чтобы ее ячейка с отступом была выделена. Также было бы здорово, если бы выделились ячейки отступа родительских ячеек.

К сожалению, при настройке теперь ячейки отступа из обеих дочерних ячеек подсвечиваются независимо от того, какая таблица наведена. Я пробовал это в Firefox 3.5 и IE 8 и получаю те же результаты.

Я нашел этот учебник и связанную с ним демонстрацию , которая в основном делает то, что я пытаюсь сделать, за исключением того, что вместо таблиц используются вложенные списки. Но когда я пытаюсь использовать оператор> (для создания стиля table.Content:hover > td.ContentIndent), он вообще не работает. Я не уверен, в чем разница.

Ответы [ 2 ]

0 голосов
/ 30 ноября 2009

Ну, во-первых, если вы хотите поддерживать IE6, вам понадобится Javascript некоторого описания, потому что этот браузер поддерживает только псевдоэлемент :hover на якорях (ссылки, т.е. теги <a>).

Другая проблема заключается в том, что для этого вам понадобится дочерний селектор CSS, что опять-таки не поддерживается в IE6.

Итак, версия, не совместимая с IE6: 

table.Content:hover > tbody > tr > td.ContentIndent { background: #AAA; }

Обратите внимание на элемент <tbody>, который создается неявно.

Без дочернего (>) селектора это выражение: 

table.Content td.ContentIndent { ... }

будет захватывать каждую ячейку отступа, поскольку она называется селектором потомков, а таблица содержимого верхнего уровня является родительской для всех них.

Вы можете обойти эту проблему следующим образом: 

table.Content:hover td.ContentIndent { background: #AAA; }
table.Content:hover table.Content td.ContentIndent: background: #FFF; }

Второй в основном устраняет эту проблему, возвращая более глубокие отступы к нормальному форматированию. Это довольно стандартная методика для решения некоторых проблем IE6, которые могут быть решены с помощью дочернего селектора, но не всегда возможно или практично возвращать стили таким образом.

Для поддержки IE6 я бы порекомендовал библиотеку Javascript. Мой предпочтительный вариант - jQuery, который будет включать такой код: 

$(function() {
  $("table.Content").hover(function() {
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").addClass("hover");
  }, function() [
    $(this).children("tbody").children("tr")
      .children("td.ContentIndent").removeClass("hover");
  });
});

с: 

td.hover { background: #AAA; }
0 голосов
/ 30 ноября 2009

Проблема в том, что вы используете класс «Content» и для окружающей таблицы, поэтому событие hover вызывается для всей таблицы всякий раз, когда курсор входит в родительский объект. Дайте родительской таблице другой класс (например, «Parent»), и она будет работать нормально.

Селектор типа 

.Content td

обычно применяется к каждому td ниже. Содержимое, независимо от того, насколько глубоко оно вложено. Символ> указывает, что правило действительно для непосредственных потомков элемента только , а не для более глубоких вложенных элементов. IE до 7 не распознает>.

...