✔ Div 1 hover = div 2 verändert sich

[Adi | tmine]

Hallo Form mal ne Frage an alle CSS Spezialisten.
Ist es möglich, z.B. wenn div1 hover dann div 2 sichtbar?
gibts da ne möglichkeit?

Danke schon mal

 

[Gumbo]

Das ist nur möglich, wenn das zweite Element Nachfahre oder Geschwister des ersten Elements ist. Andernfalls ist es nur mit JavaScript möglich.

.div2 {
	visibility: hidden;
}
.div1:hover .div2,
.div1:hover + .div2 {
	visibility: visible;
}

<div class="div1">foo<div class="div2">bar</div></div>

<div class="div1">foo</div><div class="div2">bar</div>

Die entsprechende Unterstützung durch den Webbrowser natürlich vorausgesetzt.

 

[Adi | tmine]

wie müsste das dann aussehen wenn das der Fall wäre?

 

[Maik]

Hi,

und hier eine weitere Variante:

#div1 #div2 {
        display:none;
}
#div1:hover #div2 {
        position:absolute;
        top:30px;
        left:0px;
        display:block;
        z-index:1;
        padding:3px;
        background:#ffff00;
        border:1px solid #000;
}

<div id="div1">Test<div id="div2">Tooltip</div></div>

Bleibt anzumerken, dass die älteren IE-Versionen (<7) die gezeigten Methoden nicht unterstützen, da sie die :hover-Pseudoklasse nur auf Hyperlinks anwenden.

 

[Adi | tmine]

vielen Dank für eure Hilfe