Wie kann ich beim Hover eine CSS-Klassenänderung vornehmen?

Also hier habe ich zwei verschiedene Dinge definiert:Wie kann ich beim Hover eine CSS-Klassenänderung vornehmen?

<running>Running.</running> 

<showr>Cross-Country, Track</showr>

Der Benutzer auf „läuft“ schweben soll, und das wird machen „showr“ angezeigt werden.

Hier ist das CSS, das ich habe; Ich kann es nicht funktionieren lassen.

showr { display:none; } 

showr running:hover { display:inline; }

Können Sie mir bitte erklären, wie ich das schaffen kann? (etwas CSS wäre gut)

Danke für die Hilfe!

Quelle

2011-01-03 Andrew

Ich bin nicht sicher, welche Art von Elementen ausgeführt und showr sind, so habe ich divs und schrieb diesen Code, die Arbeit macht. Unter der Annahme, dass running und showr Blockelemente sind, sollte es nur funktionieren, um die div-Tags durch solche zu ersetzen.

<div id='running' onMouseOver="document.getElementById('showr').style.display='inline'" onMouseOut="document.getElementById('showr').style.display='none'">Running.</div> 

<div id='showr' style='display:none'>Cross-Country, Track</div>

Quelle

2011-01-03 06:17:29 trex005

das sein sollte:

showr running { display: none} 

showr:hover running { display: inline }

Quelle

2011-01-03 06:11:36

JavaScript Handel Leider ist es immer noch nicht funktioniert. Danke, dass du versucht hast zu helfen.Ich denke, das Problem mit diesem Code ist, dass die beiden Tags nicht eins sind, also würde es nicht funktionieren. – Andrew

@Andrew: Nun, natürlich. Um dies ohne Verschachtelung tun zu können, müssten Sie JavaScript verwenden. –

@musicfreak Nicht unbedingt wahr. Es gibt z. B. Geschwisterauswahlvorrichtungen, die verwendet werden könnten. –

Eine Lösung ist <showr> ein Kind <running> zu machen:

<running>Running.<showr>Cross-Country, Track</showr></running>

CSS:

showr { display:none; } 

running:hover showr { display:inline; }

jedoch dies nicht funktioniert auf IE, weil IE CSS nicht umgesetzt habe richtig .

Beispiel: ein benachbartes Geschwister-Selektor (oder ähnlich) wie running:hover + showr { display:inline; }http://jsfiddle.net/FZCCg/ (I ersetzt die Tag-Namen mit Klassen für gültig html)

Quelle

2011-01-03 06:20:09 tcooc

Dies ist kein erweiterter Selektor! ': Hover' funktioniert jedoch nur in Links in IE6. –

@pst: Danke, ich wusste, dass es nicht funktioniert für IE, und die meisten fortgeschrittenen Selektoren nicht für IE arbeiten ... 1 + 1 – tcooc

Ich brauche sie eigentlich getrennt zu sein, als der zweite ist auf einem anderen Teil der Seite. Danke für die Hilfe. – Andrew

Es erfordert, dass Ihr CSS verwendet - oder, wie andere vorgeschlagen haben, erstellen eine Eltern-Geschwister-Beziehung durch Ändern des Markups.

Dies ist, weil der tatsächliche Stil immer nur auf das Thema des Wählers, die paßt angewandt wird. Aus diesem Grund ist auch der benachbarte Geschwisterform arbeiten können und warum Verschachtelung nicht erforderlich ist, von 5.7 Adjacent Sibling Selector:

Angrenzend Geschwister Selektoren haben die folgende Syntax: E1 + E2, wobei E2 die Gegenstand der Selektor . Der Selektor stimmt überein, wenn E1 und E2 das gleiche Elternteil im Dokumentenbaum teilen und E1 unmittelbar vor E2 steht, wobei Nicht-Element-Knoten (wie Textknoten und Kommentare) ignoriert werden.

Ich bin nicht sicher, welcher Browser, falls vorhanden (nicht IE6 sicher!), Richtig benachbarte Geschwister obwohl unterstützen. Siehe http://www.w3.org/TR/CSS2/selector.html für die CSS-Selektorregeln und quirksmode - CSS für die allgemeine Kompatibilität. Auch die :hover Pseudo-Klasse ist komplett auf IE6 gebrochen - Überraschung!

Auf der anderen Seite ist dies trivial ist mit jQuery und dem hover Ereignisse zu tun, eine Arbeits CSS2 Voraussetzung für eine Anforderung ;-)

Quelle

2011-01-03 06:20:55

Wie kann ich beim Hover eine CSS-Klassenänderung vornehmen?

Antwort

Verwandte Themen