Antworten auf deine Fragen:
Neues Thema erstellen

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

d3mueller

PC-Freak :D

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
 

d3mueller

PC-Freak :D

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

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 :D 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

Nicht mehr ganz neu hier

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

PC-Freak :D

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
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

undefined

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.
 
Zuletzt bearbeitet:

d3mueller

PC-Freak :D

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.
Das wär blöd. Javascript kann ich nicht wirklich. Aber man kann halt nicht alles haben :D

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

undefined

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.
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>
 
Zuletzt bearbeitet:

d3mueller

PC-Freak :D

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

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 :D 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
 
Zuletzt bearbeitet:

cebito

undefined

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

PC-Freak :D

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;
}

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

jacek

Noch nicht viel geschrieben

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;
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.635
Beiträge
1.538.480
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben