CSS: Einen Transition-Effekt beim Verlassen der Maus...

Trainer Red · 18. Juni 2016

Hallo,
Problem (als Beispiel):

.div {
background-color: red;
width: 100px;
height: 100px;

/* HIER IST DAS PROBLEM */
margin-top: 30px;
margin-left: 50px;

transition: all 300ms;
}

.div:hover {
backgorund-color: green;
width: 50px;
height: 50px;

}

Die Sache ist die. Ich habe bereits herausgefunden, dass der Transition-Effekt in dem Fall von einem Effekt beim Mouse Off NICHT in den Hover gehört. Ok. Aber wenn ich den Quak in den div reinschreibe und eine POSITIONSANGABE (im Falle von margin hier) habe, dann animiert er das Objekt schon beim Laden der Seite.

HEIßT:
Wenn ich die Seite lade bewegt sich der Rote Kasten von margin: 0px; zu margin: 30px 0px 0px 50px; und das will ich nicht.

Könnt ihr mir hier weiterhelfen? Ohne margin geht es ja, so will ichs aber nicht.

askling · 18. Juni 2016

mir ist leider noch nicht ganz klar, welches verhalten du erreichen möchtest. es ist immer zu empfehlen, ein tatsächliches code-besipiel (z.b. über js bin oder jsfiddle) zu posten, dass man den code auch ausführen kann. macht das helfen einfacher.

ganz allgemein, du musst bei eine transition angeben für welche eigenschaften sie gelten soll. momentan steht da "all". evtl. reicht es schon hier die eigenschaft zu benennen, so dass die verschiebung durch den margin keine transition erhält.

schau mal hier:

http://www.w3schools.com/cssref/css3_pr_transition-property.asp

wenn es dir nur darum geht, dass es beim laden noch nicht greift, kannst du auf das event hören (z.B. onload) und die transition per javascript hinzufügen (bzw. es ist besser dem div eine class hinzuzufügen, welche nur die eigenschaft transition hat, die benutzt man praktisch als schalter -> <div class = "thisClassHasTransition">).

wenn es um das verlassen der maus geht entsprechend auf einem anderen mouse event.

macht das sinn für dich?

smallwall · 18. Juni 2016

Einmal die jsfiddle ausfüllen und fiddeln lassen, so bringt das nicht viel....

Nick_SMI · 22. Juni 2016

Hallo,

wenn ich es richtig verstanden habe, suchst du sowas:

Code:

<html>
<head>
<style>
div 
{
	background-color: red;
	width: 100px;
	height: 100px;
	transition: all 300ms;
}

div:hover 
{
	background-color: green;
	width: 50px;
	height: 50px;
	margin-top: 30px;
	margin-left: 50px;
}
</style>
</head>
<body>
    <div>
	    Hallo
    </div>
</body>
</html>

Nun ändert sich beim "hovern" der Kasten von Margin 0 auf 30, 0, 0, 50....
Denke mal, dass du das wolltest? ^-^
(Das ist jetzt für alle DIV-Container!)

Grüße,
Nick

Teisi · 24. Juni 2016

@Nick_SMI
beim deim style hover, kannst du das transition weg lassen.

Suche

CSS: Einen Transition-Effekt beim Verlassen der Maus...

Trainer Red

Lt. Junior Grade

askling

Gast

smallwall

Lt. Junior Grade

Nick_SMI

Ensign

Teisi

Lt. Junior Grade

Ähnliche Themen