CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

d3mueller · 30.03.2012

hi, also ich habe bereits diesen Code:

Code:

<head>
<style type="text/css">
.box {
    width:500px;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
}

.box:hover {
width: 800px;
} 
</style>
</head>

<body>
<div class="box">test</div>
<div class="box2">test</div>

</body>

Ist nur ein einfacher, schnell erstellter Code. wenn man auf das obere Div fährt, wird es breiter. Wie kann man das jetzt machen, dass, wenn man auf das obere Div geht, sich das untere nur ändert. Geht das überhaupt?
Und dann noch, wie geht das, das beide animiert werden, wenn man auf eines von beiden(oder nur das obere) fährt?

Hoffe, ihr versteht, was ich meine, und könnt mir helfen. Wäre echt nett

Lg
Dennis

LaFaSiLuc · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

Also, ich versteh das so nicht, sorry...

d3mueller · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

LaFaSiLuc schrieb:
Also, ich versteh das so nicht, sorry...

sry, wenn ich es nicht so gut erklären kann, ist iwie schwer.
Wollte es anhand eines Beispiels erklären. Mal schauen:

Also, ich habe 2 Divs, Zum Beispiel Div 1 und Div 2
Jetzt möchte ich mit CSS Transition folgendes schreiben.
Man geht mit der Maus auf das Div 1 und ein Animationseffekt wird bei Div 2 angewandt (nicht bei Div 1).

So halt. Hoffe, du verstehst es jetzt

ist wie gesagt schwer zu erklären.

Kleines Beispiel:
(hoffe ich darf das posten. Ist übrigens ne klasse Seite

)
wenn du hier über einen Artikellink fährst, werden die restlichen ausgegraut(oder transparent gemacht). Das meine ich. Wie kann ich das umsetzen?

Lg
Dennis

hedoo · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

Hallo versuche es mal so:

HTML:

<html>
<body>
<style type="text/css">
.box1 {
   background: blue;
}

.box2{background: yellow;
width: 500px;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
transition: all 3s ease;
}
.box1:hover+.box2{
width: 800px;
} 
</style>
</head>
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
</body>
</html>

Gruß
hedoo

d3mueller · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

hedoo schrieb:

Hallo versuche es mal so:

HTML:

<html>
<body>
<style type="text/css">
.box1 {
   background: blue;
}

.box2{background: yellow;
width: 500px;
-webkit-transition: all 3s ease;
-moz-transition: all 3s ease;
transition: all 3s ease;
}
.box1:hover+.box2{
width: 800px;
} 
</style>
</head>
<body>
<div class="box1">Box1</div>
<div class="box2">Box2</div>
</body>
</body>
</html>

Gruß
hedoo

Hey, Danke, es geht.
Wie genau funktioniert das mit dem +?
Meine Überlegung: "Wenn Mouseover

hover) bei box1, dann wende (in diesem Fall) width bei box2 an"
Stimmt das in etwa? Wenn ja, dann habe ich gerade etwas dazugelernt, was ich schon vor Jahren hätte gebrauchen können

Danke. Würde das dann mit mehreren Boxen hinter dem + gehen?

Lg
Dennis

cebito · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

Da wirst du um eine JS-Lösung nicht herumkommen, wenn du auch möchtest, das beim hover des zweiten der erste sich ändert.

Edit - der + spricht den direkten Nachfolger auf gleicher Ebene an, mit der ~ könntest du alle Nachfolger auf gleicher Ebene ansprechen, aber eben nur die folgenden.

Hier mal ein Beispiel

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

<style>
.expand{
    width:200px;
    height:50px;
    background:red;
}
.expand:hover~.expand{
    width:500px;
}
</style>
</head>

<body>
<div class="expand"></div>
<div class="expand"></div>
<div class="expand"></div>
<div class="expand"></div>
<div class="expand"></div>
<div class="expand"></div>
</body>
</html>

Wenn du die Tilde jetzt durch ein + ersetzt siehst du den Unterschied.

d3mueller · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

cebito schrieb:
Da wirst du um eine JS-Lösung nicht herumkommen, wenn du auch möchtest, das beim hover des zweiten der erste sich ändert.

Das wär blöd. Javascript kann ich nicht wirklich. Aber man kann halt nicht alles haben

Edit - der + spricht den direkten Nachfolger auf gleicher Ebene an, mit der ~ könntest du alle Nachfolger auf gleicher Ebene ansprechen, aber eben nur die folgenden.

Danke

cebito · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

cebito schrieb:
Da wirst du um eine JS-Lösung nicht herumkommen, wenn du auch möchtest, das beim hover des zweiten der erste sich ändert.

Ha, stimmt nicht, da ist mir doch glatt noch was eingefallen

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

<style>
#hover{
    width:200px;
}
#hover:hover .expand{
    width:500px;
}
.expand{
    width:200px;
    height:50px;
    background:red;
}

#hover .expand:hover{
    width:200px;
}
</style>
</head>

<body>
<div id="hover">
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
</div>
</body>
</html>

d3mueller · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

cebito schrieb:

Ha, stimmt nicht, da ist mir doch glatt noch was eingefallen

HTML:

<!DOCTYPE html>
<html>

<head>
    <title>Titel</title>

    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="keywords" content="">

<style>
#hover{
    width:200px;
}
#hover:hover .expand{
    width:500px;
}
.expand{
    width:200px;
    height:50px;
    background:red;
}

#hover .expand:hover{
    width:200px;
}
</style>
</head>

<body>
<div id="hover">
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
    <div class="expand"></div>
</div>
</body>
</html>

Danke

Das ist ja cool.
EDIT:
Hättest du grad vllt Lust/Zeit mir das grob zu erklären? Ich verstehe diesen Teil

#hover:hover .expand{
width:500px;
}

(...)

#hover .expand:hover{
width:200px;
}

nicht so ganz.

Wäre nett

Lg
Dennis

cebito · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

Code:

#hover:hover .expand{
    width:500px;
}

Wenn der umschließende gehovert wird, werden alle inliegenden mit der Klasse breiter gemacht. Dem muss ich aber noch für den inliegenden der gerade gehovert wird widersprechen sonst wäre der ja auch so breit, deshalb

Code:

#hover .expand:hover{
    width:200px;
}

d3mueller · 30.03.2012

AW: CSS 3 Transition: Bei Hover auf einem Div soll ein anderes animiert werden

cebito schrieb:
Code:

#hover:hover .expand{ width:500px; }

Wenn der umschließende gehovert wird, werden alle inliegenden mit der Klasse breiter gemacht. Dem muss ich aber noch für den inliegenden der gerade gehovert wird widersprechen sonst wäre der ja auch so breit, deshalb

Code:

#hover .expand:hover{ width:200px; }

Aah. Stimmt, das ist logisch.
Danke für deine Hilfe

jacek · 27.02.2017

auch wenn schon älter, danke, hab für listing im shopware benutzt:
.listing:hover .product--box {
opacity:0.5;
}
.product--box{
opacity:1.0;
}

.listing .product--box:hover {
opacity:1.0;
}