Hallo,
und zwar habe ich eine Möglichkeit gesucht, wie ich 2 Divs bei :hover Effekt gegenseitig beeinflussen kann. Das funktioniert jedoch nur halb. Denn das Div „Seite1“ kann das danach erstellte Div „Seite2“ beeinflussen, jedoch nicht anders herum.
Hier mal mein Code:
index.html
[CODE]
<div class="Seite1">
</div>
<div class="Seite2">
</div>
css
[CODE]@charset „utf-8“;
/* CSS Document */
html, body
{
width: 100%;
height:100%;
margin: 0;
padding: 0;
min-width:980px;
}
body
{
}
.all
{
margin-top:150px;
transform-style: preserve-3d;
transition: transform 1s;
transform-origin: center;
}
.Seite1
{
position: fixed;
left:50%;
margin-left:-955px;
width:1000px;
height:600px;
background-color:#0066CC;
transform: perspective(2000px) rotateY(-45deg);
transition: 0.5s ease-in-out;
}
.Seite2
{
position: fixed;
left:50%;
margin-left:-100px;
width:1000px;
height:600px;
background-color:#F66;
transform: perspective(2000px) rotateY(45deg);
transition: 0.5s ease-in-out;
}
.Seite1:hover
{
transform:scale(1.2,1.2) translate(200px,0);
}
.Seite2:hover
{
transform:scale(1.2,1.2) translate(-200px,0);
}
.Seite1:hover + .Seite2
{
transform:translate(410px,0) perspective(2000px) rotateY(45deg) scale(1.0,0.99);
}
.Seite2:hover + .Seite1
{
transform:translate(-410px,0) perspective(2000px) rotateY(-45deg) scale(1.0,0.99);
}
[/CODE]
Ich hoffe mir kann jemand helfen. Es scheint so, dass Div „Seite2“, keine vorherigen Divs beeinflussen kann, sondern nur nachfolgende? Gibt es dazu eine Lösung wie man es bewerkstelligen könnte?
Mfg
Dtex