продвинутый: зависать глубже вложенный

Question

Я не знаю точно, как я могу описать это? Я думаю, что лучше, если вы посмотрите на jsfiddle, который я сделал ..

Как вы можете видеть, на некоторых элементах TR наведен указатель мыши, и если у TD уже есть другой bgcoler, он должен перейти на альтернативный bgcolor ..

Отлично работает в первых 3 строках, но если в DOM вложена новая таблица глубже, зеленые TD в новой таблице всегда имеют класс: hover

jsfiddle

http://jsfiddle.net/VvZuV/1/

Answer 1

Изменить это:

tr:hover td.green, tr.deep:hover td.green {
    background:#7bcf81;
}

На это:

tr:hover > td.green, tr.deep:hover > td.green {
    background:#7bcf81;
}

Новый класс не требуется.

http://jsfiddle.net/rCztp/

---

Объяснение

Как только вы зависли над <tr>, содержащим <table>, все ваши дети, внуки и т. Д. Были затронуты вашим правилом css.Использование > означает, что будут затронуты только дети.