Glatte hover übergang?

Ich scheinen Schwierigkeiten zu haben mit der animation Aspekt ein hover-Beschreibung. Das schweben an sich funktioniert einwandfrei und wird angezeigt, wo genau es platziert wird; jedoch scheint es kein fade-Effekt, wenn die Maus über oder Weg von der element. Stattdessen wird das Feld "Beschreibung" erscheint scharf, die innerhalb der 0,5 s aufgeführt in der CSS, und verschwindet auf die gleiche Weise. Ich bin auf der Suche, um einen glatten übergang Effekt, bei dem das Feld "Beschreibung" ein-und ausgeblendet. Kann mir bitte jemand helfen diese anpassen?

CODE:

#description {
    opacity:0;
    background:#fff;
    z-index:30;
    position:fixed;
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px;
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

#description a {
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }

#sidebar:hover #description {
    opacity:0.6;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out; }
  • Gelten nur für den übergang einmal in den normalen Zustand. Es ist redundant in den hover-Zustand. Auch könnten Sie eine Geige, damit wir genau sehen können, was Sie sehen, bitte?
  • Habe ich eine Geige auf den Kommentar unten. 🙂
InformationsquelleAutor brianwellers | 2014-04-24
  1. 0

    Versuchen, diese...

    #description {
    opacity:0;
    background:#fff;
    z-index:30;
    position:fixed;
    margin-left:249px; 
    margin-top:-5px; 
    border:1px solid #000; 
    width:230px; 
    height:299px;
    color:{color:text};
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

#description a { color:{color:text}; }
#description:hover { opacity:0.6; }
    • Gehen Sie Fischen, leider. Der hover-übergang Verhalten immer noch das gleiche.
    • hmmm. wünschte, ich könnte sehen, Ihren vollständigen code. Hier, versuchen Sie entfernen die Selektoren von #Beschreibung. So würde es nur werden #description:hover { opacity:0.6; } bearbeitete ich es oben. ^
    • Hier ist ein Turnschuh, das zeigt einen Teil des Codes, ich arbeite so weit. Beiden IMG ' s werden gesetzt in der leeren Mitte-Boxen, und ein hover-overlay auf, erscheint in der rechten box. Wenn Sie die Maus über es, sehen Sie die wogenden in-und-out-Bewegung. jsfiddle.net/Ke8uP
    InformationsquelleAutor
  2. 0

    Versuchte es selbst in meinem code.
    Einfach loszuwerden off Deckkraft und es wird funktionieren.
    Sehen youtiming dot com demo.

    'Deckkraft' ist eine css-Eigenschaft, die Sie brauchen, um zu geben den level-Wert: http://www.w3schools.com/cssref/css3_pr_opacity.asp

    InformationsquelleAutor Daniel C. Deng
  3. 0

    Ist hier ein live-Beispiel auf der fiddle, die ich gerade gemacht

    Dies ist das HTML-Markup

    <div class="kid">
<img src="https://cleansites.us/images/katie-kid.jpg" alt="" width="600" height="750" />
<img src="https://cleansites.us/images/katie-adult.jpg" alt="" width="600" height="750" />
</div>

    Dies ist der CSS -

    .kid {
    max-width:250px;
    position:relative;
}

.kid img {
    display:block;
    opacity:1;
    height: auto;
    transition:.6s ease;
    width:100%;
    position:absolute;
    z-index:12;
}
.kid img:hover {
    opacity:0;
}
.kid img + img {
    display:block;
    opacity:1;
    position:relative;
    z-index:10;
}

    Fiddle hier: https://jsfiddle.net/cdsaekv9/7/

    InformationsquelleAutor lupoll88
Schreibe einen Kommentar