CSS Problem

T

TTlong

Angesehenes Mitglied
Hallo,

ich habe folgendes Problem:

Ich habe eine (Test) Seite auf welcher ein Div (.content) mittels CSS3 beim MouseOver von (.link) eingeblendet wird.

CODE
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<style>
.content {
width: 100%;
height: 0px;
background: #E2851D;
top: 70px;
-webkit-transition: width 2s;
transition: width 2s;
transition-duration: 0.9s;
transition-property: all;
transition-timing-function: ease-in-out;
}
.link:hover +.content {
height: 250px;
}
</style>
</head>
<body>
<div class="link">Link</div>
<div class="content">Inhalt</div>
</body>
</html>



Das funktioniert auch soweit, NUR, sobald ich um das Div (.link) ein weiteres Div herum setze, funktioniert es nicht mehr?!



CODE
<div class="blubber">
<div class="link">Link</div>
</div>


Kann jemand Abhilfe schaffen?
 
laut convention müssen elemente wohl unmittelbar aufeinander folgen, was in deinem fall ja nicht so ist. sowas geht aber:

CODE
<!DOCTYPE HTML>
<html lang="de">
<head>
<meta charset="utf-8">
<title>CSS Test</title>
<style>
.content {
width: 100%;
height: 0px;
background: #E2851D;
top: 70px;
-webkit-transition: width 2s;
transition: width 2s;
transition-duration: 0.9s;
transition-property: all;
transition-timing-function: ease-in-out;
overflow:hidden;
}
.mylink:hover +.content {
height: 250px;
}
</style>
</head>
<body>
<div class="laber">
<div class="rabarber">
<div class="blubber" style="border:1px solid red;">
<div class="mylink">Link3</div>
<div class="content">Inhalt</div>
</div>
</div>
</div>
<div class="laber">
<div class="rabarber">
<div class="blubber" style="border:1px solid red;">
<div class="mylink">Link4</div>
<div class="content">Inhalt</div>
</div>
</div>
</div>

<div class="laber">
<div class="rabarber">
<div class="blubber" style="border:1px solid red;">
<div class="mylink">Link3</div>
<div class="content">Inhalt</div>
</div>

<div class="blubber" style="border:1px solid red;">
<div class="mylink">Link4</div>
<div class="content">Inhalt</div>
</div>
</div>
</div>

</body>
</html>



vielleicht hilft's ja weiter.
 
Hallo,

hilft mir leider nicht weiter, weil das Content-Div nicht direkt auf das Link-Div folgt. Das Link-Div befindet sich innerhalb meines Header-Konstruktes, welches eben noch von anderen Containern umgeben ist. Wollte es nur gern mit CSS machen, aber wird wohl nun doch JS werden...schade..


Danke trotzdem


EDIT:
QUOTE laut convention müssen elemente wohl unmittelbar aufeinander folgen


Hat mir doch geholfen -.-

Ich habe das Content-Div jetzt unmittelbar nach Link-Div geschrieben, es invisible gemacht und per position: fixed eine feste Position zugewiesen (letzteres sollte ohnehin so sein)...
 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben