Übergang der Hintergrundfarbe

Question

Ich versuche, einen Übergangseffekt zu erzeugen mit background-color wenn Sie mit dem Mauszeiger über Menüpunkte fahren, aber es funktioniert nicht. Hier ist mein CSS-Code:

#content #nav a:hover {
    color: black;
    background-color: #AD310B;
    /* Firefox */
    -moz-transition: all 1s ease-in;
    /* WebKit */
    -webkit-transition: all 1s ease-in;
    /* Opera */
    -o-transition: all 1s ease-in;
    /* Standard */
    transition: all 1s ease-in;
}

En #nav div ist ein Menü ul Liste der Artikel.

Answer 1

Soweit ich weiß, funktionieren die Übergänge derzeit in Safari, Chrome, Firefox, Opera und Internet Explorer 10+.

Dies sollte in diesen Browsern einen Einblendeffekt erzeugen:

a {
    background-color: #FF0;
}

a:hover {
    background-color: #AD310B;
    -webkit-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

<a>Navigation Link</a>

注意してください： Wie von Gerald in den Kommentaren erwähnt, kann man den Übergang auf der a statt auf a:hover Wenn Sie die Maus von der Verknüpfung wegbewegen, wird sie wieder in die ursprüngliche Farbe zurückgeblendet.

Das könnte sich auch als nützlich erweisen: CSS-Grundlagen: CSS 3 Übergänge

Answer 2

Meines Erachtens ist es besser, die Übergangscodes mit den ursprünglichen/minimalen Selektoren zu verbinden als mit :hover oder anderen zusätzlichen Selektoren:

#content #nav a {
    background-color: #FF0;

    -webkit-transition: background-color 1000ms linear;
    -moz-transition: background-color 1000ms linear;
    -o-transition: background-color 1000ms linear;
    -ms-transition: background-color 1000ms linear;
    transition: background-color 1000ms linear;
}

#content #nav a:hover {
    background-color: #AD310B;
}

<div id="content">
    <div id="nav">
        <a href="#link1">Link 1</a>
    </div>
</div>

Answer 3

Eine andere Möglichkeit, dies zu erreichen, ist die Verwendung von animation die mehr Kontrolle bietet.

/* declaring the states of the animation to transition through */
/* optionally add other properties that will change here, or new states (50% etc) */
@keyframes onHoverAnimation {
    0% {
        background-color: #FF0;  
    }
    100% {
        background-color: #AD310B;
    }
}

#content #nav a {
    background-color: #FF0;

    /* only animation-duration here is required, rest are optional (also animation-name but it will be set on hover)*/
    animation-duration: 1s; /* same as transition duration */
    animation-timing-function: linear; /* kind of same as transition timing */
    animation-delay: 0ms; /* same as transition delay */
    animation-iteration-count: 1; /* set to 2 to make it run twice, or Infinite to run forever!*/
    animation-direction: normal; /* can be set to "alternate" to run animation, then run it backwards.*/
    animation-fill-mode: none; /* can be used to retain keyframe styling after animation, with "forwards" */
    animation-play-state: running; /* can be set dynamically to pause mid animation*/

}

#content #nav a:hover {
    /* animation wont run unless the element is given the name of the animation. This is set on hover */
    animation-name: onHoverAnimation;
}