CSS Hover Родительские дочерние Элементы

StackOverflow https://stackoverflow.com/questions/1817575

  •  08-07-2019
  •  | 
  •  

Вопрос

Я пытаюсь настроить стиль 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) это вообще не работает.Я не уверен, в чем разница.

Это было полезно?

Решение

Ну, во-первых, если вы хотите поддерживать 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; }

Другие советы

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

Подобный селектор 

.Content td

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top