CSS-übergang Rahmen und hintergrund in der gleichen Zeit

Möchte ich ändern, hintergrund-und Rahmenfarbe auf hover in der gleichen Zeit. Ich benutze:

transition: all 0.5s ease;    
-vendors-transition: all 0.5s ease;

aber die hintergrund-Farbe ändert sich sofort.

  • Es funktioniert fein eigentlich. denken etwas anderes über-Reiten Stile. Da der fiddle-funktioniert : jsfiddle.net/nLeVx/1 Können Sie überprüfen, für andere :hover , möglicherweise übergeordneten divs?
InformationsquelleAutor mutant_america | 2013-08-28
  1. 1

    Hier einen funktionierenden code,

    #yourdiv {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: yellow;
  border: 5px solid black;    
  transition: border 500ms ease-out; 
  -webkit-transition: border 500ms ease-out; 
  -moz-transition: border 500ms ease-out;
  -o-transition: border 500ms ease-out;
}

#yourdiv:hover{
  border: 10px solid red;
  background-color: red;
}
    InformationsquelleAutor Prasanna Aarthi
  2. 1

    Ich habe versucht, dies durch die Angabe der Eigenschaften getrennt und es funktioniert, vielleicht ist die all Stichwort ausfällt?

    div:hover {
    background-color: blue;
    border-color: black;
    -webkit-transition: background-color 0.5s ease, border-color 0.5s ease;
    -moz-transition: background-color 0.5s ease, border-color 0.5s ease;
    /* please note that transitions are not supported in IE 9 and there is no -ms prefix */
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

    jsFiddle

    Update: ich glaube, ich verstehe Ihre Frage. Sie wollen den übergang zur Rückseite, auf unhovering. In diesem Fall müssen Sie die Eigenschaften der transition auf die nicht-schwebte-element sowie (die ohne :hover):

    div {
    width: 10rem;
    height: 10rem;
    background-color: purple;
    border: thick solid orange;
    -webkit-transition: background-color 0.5s ease, border-color 0.5s ease;
    -moz-transition: background-color 0.5s ease, border-color 0.5s ease;
    /* please note that transitions are not supported in IE 9 and there is no -ms prefix */
    transition: background-color 0.5s ease, border-color 0.5s ease;
}

    jsFiddle

    InformationsquelleAutor rink.attendant.6
Schreibe einen Kommentar