[ERLEDIGT] Andere Transition beim beenden von Hover?

[gumpo03]

Hi. Ich habe mich gerade Gefragt, ob es möglich ist einen anderen Transitionsverlauf beim verlassen einer Schaffläche mit der Maus zu wählen als beim betreten.
Hintergrund ist der, dass ich einen Akordeoneffekt auf meiner Seite habe, bei dem Text eingeblendet wird sobald sich das Element geöffnet hat. Dafür habe ich einen Transition-delay genutzt.
Beim verlassen der Schaltfläche wird nun aber der auch der Delay ausgeführt und der Text erst danach ausgeblendet, während das Akkordeon ja schon wieder eingefahren ist. Somit steht der Text über, was unschön aussieht.
Gibt es eine Möglichkeit diese zu umgehen eventuell indem ich einen neuen Transition Effekt für das verlassen der Schaldfläche festlege?

Hier der Code:

<div class="event_wrapper">
                    <div class="event-r">
                        <div class="event_img"><img></div>
                        <div class="event_title">Ein Kurzer Titel!</div>
                        <div class="event_text">Test Text. Mal sehen wie der angezeigt wird.<br/>
                        Test Text. Mal sehen wie der angezeigt wird.<br/>
                        Test Text. Mal sehen wie der angezeigt wird.<br/>
                        Test Text. Mal sehen wie der angezeigt wird.<br/>
                        Test Text. Mal sehen wie der angezeigt wird.<br/>
                        Test Text. Mal sehen wie der angezeigt wird.<br/>
                        Test Text. Mal sehen wie der angezeigt wird.<br/></div>
                    </div>
                </div>

.event_wrapper {
    background: hsla(0,0%,0%,0.00);
    transition-property: height, background;
    transition-timing-function: ease-in, linear;
    transition-duration: 0.5s, 0.5s;
    transition-delay: 0.15s, 0.15s;
    height:100px;
    width:100%;
}
.event_wrapper:hover {
    background-color: hsla(0,0%,0%,0.90);
    height: 250px;
}
.event-r {
    background-image: linear-gradient(to right, hsla(0,0%,0%,0.00) 15%, hsla(0,0%,0%,1.00) 85%);
    height:100%;
    width:100%;
}
.event_text {
    opacity:0;
    transition-property:opacity;
    transition-duration:0.1s;
    transition-delay:0.65s;
    transition-timing-function:linear;
}
.event_wrapper:hover .event_text {
    opacity:1;
}

Danke! :)

 

[Tronjer]

Per jQuery Events mit mouseenter() und mouseleave()

 

[gumpo03]

Wollte aber möglichst alles mit Css3 und HTML 5 lösen ohne auf Javascript zurückgreifen zu müssen.. Gibt es keine Lösung in CSS3?

EDIT: Ja gibt es, habe nocheinmal meine Suchparameter geändert und jetzt eine Lösung gefunden.
Es ist möglich, für das verlassen des Elementes eine andere Transition durchzuführen.

.klasse {
  opacity 0;
  transition-property:opacity;
  transition-duration:0.1s;
  transition-delay:1s;
  transition-timing-function:linear;
/* gehe ich von dem Element wird diese Transition ausgeführt*/
}

.klasse:hover {
  opacity 1;
  transition-property:opacity;
  transition-duration:1s;
  transition-delay:0s;
  transition-timing-function:linear;
/* Bin ich auf dem Element wird diese Transition ausgeführt */
}

Ich hatte das ganze nur Falsch herum '