✔ :hover - zusätzliche Box anzeigen

T

Trash

Erfahrenes Mitglied
Moin,
wie bekomme ich es mit CSS hin, dass wenn jemand über das X hovert, die Klasse "test" angezeigt wird?

Code: 
<div class="cell">X</div><span class="test">test</span>

Im Moment hat .test die folgenden Eigenschaften:

Code: 
.test {
	width: 200px;
	height: 100px;
	background-color: #febab5;
	display: none;
}

Ich müsste ja nun bei dem hovern display auf "block" setzen und mit position herumspielen. Aber ich muss ja die Eigenschaften von .test verändern, wenn über das X, also über .cell gehovert wird.

Irgendwie stehe ich grad auf dem Schlauch...

Danke!
 
Du musst das Element, das beim Hovern angezeigt wird, innerhalb des hovernden Bereichs einbauen! Das ganze könnte dann so aussehen:

HTML: 
<div class="cell">X<span class="test">test</span></div>

CSS: 
.test {
  display:none;
}

.cell:hover .test {
  display:block;
}

Hab das jetzt net getestet, aber so sollte es funktionieren.

Grüße,
Frezl

// Edit: Doch getestet und für gut befunden mit folgendem Doctype:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
Zuletzt bearbeitet:
Hi,

und wenn gewährleistet ist, dass das span-Element mit der Klasse test immer unmittelbarer Nachfolger des Element mit der Klasse cell ist, kann für moderne Browser auch folgendes verwendet werden:
Code: 
.test{
  width: 200px;
  height: 100px;
  background-color: #febab5;
  display: none;
}

.cell:hover + .test{
  display: block;
}
Ciao
Quaese
 
Quaese hat gesagt.:
und wenn gewährleistet ist, dass das span-Element mit der Klasse test immer unmittelbarer Nachfolger des Element mit der Klasse cell ist, kann für moderne Browser auch folgendes verwendet werden:
Code: 
.test{
  width: 200px;
  height: 100px;
  background-color: #febab5;
  display: none;
}

.cell:hover + .test{
  display: block;
}
Zum Vergrößern anklicken....

Die Umschreibung "unmittelbarer Nachfolger" könnte auch mit "Selektoren für Nachfahren" oder Kind-Selektoren assoziiert und verwechselt werden ;)

Mit Bezug zur eingangs gezeigten HTML-Struktur sind hier "Selektoren für benachbarte Elemente" gemeint :)
 
Zuletzt bearbeitet:
Danke für die Antworten. Was mich wundert ist, dass die Box immer nur nach einem Klick auftaucht, nicht aber beim hovern ?! Wie kann das sein?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück