Was ist das Gegenteil von: Schweben (beim Verlassen der Maus)?

Gibt es eine Möglichkeit, das Gegenteil von der :hover Verwendung von nur CSS zu tun ? Wie in: Wenn :hoverja on Mouse Enter, gibt es ein CSS-Äquivalent zu on Mouse Leave?

Beispiel:

Ich habe ein HTML-Menü mit Listenelementen. Wenn ich mit der Maus über eines der Elemente schwebe, wird eine CSS-Farbanimation von #999bis angezeigt black. Wie kann ich den gegenteiligen Effekt erzielen, wenn die Maus den Elementbereich mit einer Animation von blackbis verlässt #999?

jsFiddle

(Denken Sie daran, dass ich nicht nur dieses Beispiel beantworten möchte, sondern das gesamte "Gegenteil von :hover".)

Wenn ich das richtig verstehe, können Sie dasselbe tun, indem Sie Ihre Übergänge auf den Link anstatt auf den Schwebezustand verschieben:

ul li a {
    color:#999;       
    transition: color 0.5s linear; /* vendorless fallback */
    -o-transition: color 0.5s linear; /* opera */
    -ms-transition: color 0.5s linear; /* IE 10 */
    -moz-transition: color 0.5s linear; /* Firefox */
    -webkit-transition: color 0.5s linear; /*safari and chrome */
}

ul li a:hover {
    color:black;
    cursor: pointer;
}

http://jsfiddle.net/spacebeers/sELKu/3/

Die Definition von Schwebeflug ist:

Der: hover-Selektor wird verwendet, um Elemente auszuwählen, wenn Sie mit der Maus darüber fahren.

Nach dieser Definition ist das Gegenteil von Schweben jeder Punkt, an dem sich die Maus nicht darüber befindet. Jemand, der viel schlauer als ich ist, hat diesen Artikel verfasst und in beiden Zuständen unterschiedliche Übergänge festgelegt - http://css-tricks.com/different-transitions-for-hover-on-hover-off/

#thing {
   padding: 10px;
   border-radius: 5px;

  /* HOVER OFF */
   -webkit-transition: padding 2s;
}

#thing:hover {
   padding: 20px;
   border-radius: 15px;

  /* HOVER ON */
   -webkit-transition: border-radius 2s;
}

Verwenden Sie einfach CSS-Übergänge anstelle von Animationen.

A {
    color: #999;
    transition: color 1s ease-in-out;
}

A:hover {
    color: #000;
}

Live-Demo

Nein, es gibt keine explizite Eigenschaft für Mausurlaub in CSS.

Sie können Folgendes verwenden: Bewegen Sie den Mauszeiger über alle anderen Elemente mit Ausnahme des betreffenden Elements, um diesen Effekt zu erzielen. Aber ich bin mir nicht sicher, wie praktisch das wäre.

Ich denke, Sie müssen sich eine JS / jQuery-Lösung ansehen.

Sie können den CSS3-Übergang verwenden

Einige gute Links:

http://css-tricks.com/different-transitions-for-hover-on-hover-off/

http://www.alistapart.com/articles/understanding-css3-transitions/

Obwohl die Antworten hier ausreichend sind, denke ich wirklich, dass das Beispiel von W3Schools zu diesem Thema sehr einfach ist (es hat die Verwirrung (für mich) sofort beseitigt).

Verwenden Sie den :hoverSelektor, um den Stil einer Schaltfläche zu ändern, wenn Sie die Maus darüber bewegen.

Tipp: Verwenden Sie die Eigenschaft für die Übergangsdauer, um die Geschwindigkeit des "Hover" -Effekts zu bestimmen:

Beispiel

.button {
    -webkit-transition-duration: 0.4s; /* Safari & Chrome */
    transition-duration: 0.4s;
}

.button:hover {
    background-color: #4CAF50; /* Green */
    color: white;
}

Zusammenfassend lässt sich sagen, dass für Übergänge, bei denen die Animationen "Enter" und "Exit" identisch sein sollen, Übergänge auf dem Haupt-Selektor .buttonund nicht auf dem Hover-Selektor verwendet werden müssen .button:hover. Für Übergänge, bei denen die Animationen "Enter" und "Exit" unterschiedlich sein sollen, müssen Sie unterschiedliche Übergänge für Haupt- und Hover-Selektor angeben.

Geben Sie Ihre Dauer in die Auswahl ohne Schwebeflug ein:

li a {
  background-color: #111;
  transition:1s;
}

li a:hover {
  padding:19px;
}

Fügen Sie einfach einen Übergang zu dem Element hinzu, mit dem Sie sich anlegen. Beachten Sie, dass beim Laden der Seite einige Auswirkungen auftreten können. Wenn Sie beispielsweise einen Randradius geändert haben, wird dieser beim Laden des Doms angezeigt.

.element {
  width: 100px;
  transition: all ease-in-out 0.5s;
}
 
 .element:hover {
  width: 200px;
    transition: all ease-in-out 0.5s;
}

Du hast falsch verstanden :hover; Es heißt, die Maus befindet sich über einem Objekt, anstatt dass die Maus gerade das Objekt eingegeben hat.

Sie können dem Selektor eine Animation hinzufügen, ohne :hoverden gewünschten Effekt zu erzielen.

Übergänge sind eine bessere Option: http://jsfiddle.net/Cvx96/

Das Gegenteil von :hoverscheint zu sein :link.

(Bearbeiten: technisch kein Gegenteil, da es 4 Selektoren :linkgibt :visited, :hoverund :active. Fünf, wenn Sie einschließen :focus.)

Wenn Sie beispielsweise eine Regel definieren .button:hover{ text-decoration:none }, um die Unterstreichung einer Schaltfläche zu entfernen, wird die Unterstreichung angezeigt, wenn Sie die Schaltfläche in einigen Browsern deaktivieren. Ich habe das mit behoben.button:hover, .button:link{ text-decoration:none }

Dies funktioniert natürlich nur für Elemente, die tatsächlich Links sind (mit href-Attribut).

Fügen Sie einfach einen Übergang und den Namen der Animation in der Klasse inicial hinzu, in Ihrem Fall ul li a, fügen Sie einfach eine "Übergang" -Eigenschaft hinzu und das ist alles, was Sie brauchen

ul li {
    display: inline;
    margin-left: 20px;
}

ul li a {
    color: #999;
    transition: 1s;
    -webkit-animation: item-hover-off 1s;
    -moz-animation: item-hover-off 1s;
    animation: item-hover-off 1s;
}

ul li a:hover {
    color: black;
    cursor: pointer;
    -webkit-animation: item-hover 1s;
    -moz-animation: item-hover 1s;
    animation: item-hover 1s;
}

@keyframes item-hover {
    from {
      color: #999;
      }
    to {
      color: black;
      }
}
    
@-moz-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}
    
@-webkit-keyframes item-hover {
    from {
        color: #999;
      }
    to {
        color: black;
      }
}

@keyframes item-hover-off {
    from {
      color: black;
      }
    to {
      color: #999;
      }
}
    
@-moz-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}
    
@-webkit-keyframes item-hover-off {
    from {
        color: black;
      }
    to {
        color: #999;
      }
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Contacts</a></li>
</ul>