CSS Hover Eltern Kind Artikel

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

  •  08-07-2019
  •  | 
  •  

Frage

Ich versuche, einen CSS-Stil Setup eine Tabellenzelle in einer verschachtelten Tabelle zu markieren, wenn der Tisch ist schwebt.

Siehe Beispielcode unten ..... 

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

Im Grunde genommen, wenn eine der untergeordneten Tabellen moused über, würde Ich mag es Einbuchtung Zelle ist hervorzuheben. Es wäre auch cool, wenn die Vertiefung Zellen der Elternzellen markiert werden würden.

Leider ist die Art und Weise es Setup jetzt ist, erhalten die Vertiefung Zellen von beiden der Kind-Zellen hervorgehoben, unabhängig davon, welche Tabelle moused über. Ich habe schon versucht, diese in Firefox 3.5 und IE 8 und die gleichen Ergebnisse erhalten.

habe ich finde das Tutorial und die damit verbundene Demo das bedeutet im Grunde, was ich versuche, zu tun, außer es verschachtelte Listen anstelle von Tabellen verwendet. Aber, wenn ich versuche, den> Operator zu verwenden (um den Stil table.Content:hover > td.ContentIndent zu machen) es überhaupt nicht funktionieren. Ich bin mir nicht sicher, was der Unterschied ist.

War es hilfreich?

Lösung

Nun, zunächst wollen, wenn Sie unterstützen IE6 Sie gehen Javascript von einer Beschreibung zu müssen, weil das Browser auf Anker das :hover Pseudoelement nur unterstützt (Links dh <a> Tags).

Das andere Problem ist, dass Sie das Kind CSS-Selektor müssen, dies zu tun, was wiederum nicht in IE6 unterstützt wird.

So eine nicht-IE6 kompatible Version ist: 

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

Beachten Sie die <tbody> Element, das implizit erstellt wird.

Ohne das Kind (>) Selektor dieser Ausdruck: 

table.Content td.ContentIndent { ... }

wird jede indent Zelle greifen, weil das als Nachkommen Wähler und die Top-Level-Content-Tabelle sind Eltern zu allen von ihnen bekannt ist.

Sie können um um dieses Problem so: 

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

Die zweite bricht grundsätzlich das Problem, indem man die tieferen Einzüge Rückkehr zu, was auch immer die normale Formatierung sein sollte. Es ist eine ziemlich Standard-Technik mit einigen IE6 Problemen zu tun hat, die mit einem Kind Selektor gelöst werden könnten, aber es ist nicht immer möglich oder praktisch Arten auf diese Weise zurück.

Um IE6 zu unterstützen würde ich eine Javascript-Bibliothek empfehlen. Meine bevorzugte Option ist jQuery, die Code wie folgt bedeuten würde: 

$(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");
  });
});

mit: 

td.hover { background: #AAA; }

Andere Tipps

Das Problem ist, dass Sie die „Inhalt“ Klasse für die umliegende Tabelle auch verwenden, so dass das Hover-Ereignis für die gesamte Tabelle ausgelöst, wenn die Cursor der Eltern eintreten. Geben Sie die übergeordnete Tabelle eine andere Klasse (zum Beispiel „Parent“), und es wird funktionieren.

Ein Wähler wie 

.Content td

wird in der Regel an jedem td unter .content gelten, unabhängig davon, wie tief verschachtelt. Die> gibt an, dass die Regel für gültig sofortige Kinder des Elements nur und nicht für tiefer verschachtelt diejenigen. IE vor 7 nicht erkennt>.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top