Mouseover 2 colori con css-css, css3, css-transitions

La voce di menu predefinita è di colore bianco. Il colore di passaggio del mouse è blu

La mia domanda è -

Se teniamo il mouse al passaggio del mouse sulla voce di menu. prima è necessario mostrare il colore blu dopo 1 o 2 secondi, il colore dovrebbe cambiare in un altro colore giallo.

E 'possibile con transizioni css o qualsiasi idea con CSS?

risposte:

3 per risposta № 1

Prova questo forse aiuto

HTML

<div class="test"><div></div></div>​​​​​​​​​​​​​​​​

CSS

​.test{
width:100px;
height:100px;
background-color:#0ff;
-webkit-transition:background-color 1s ease-in;
-moz-transition:background-color 1s ease-in;
-o-transition:background-color 1s ease-in;
transition:background-color 1s ease-in;
}
.test div{
width:100px;
height:100px;
-webkit-transition:background-color 3s ease-in;
-moz-transition:background-color 3s ease-in;
-o-transition:background-color 3s ease-in;
transition:background-color 3s ease-in;
}
.test:hover{
background-color:#f00;
}

.test div:hover{
background-color:green;
}

​jsFiddle

---

1 per risposta № 2

È possibile ottenere questo con le animazioni CSS3 (funziona in browser moderni).Qui "s un esempio che cambia il colore del pulsante dal grigio al blu e poi giallo.

Spero possa aiutare!

Demo - jsFiddle

HTML

<div class="button"></div>

CSS

.button {
width: 150px;
height: 50px;
background-color: #e3e3e3;
border: 1px solid #000000;
}

.button:hover {
-webkit-animation: color 1.0s forwards;
-moz-animation: color 1.0s forwards;
-o-animation: color 1.0s forwards;
}

@-webkit-keyframes color {
0%   { background-color: #0000ff; }
50%  { background-color: #0000ff; }
100% { background-color: #ffff00; }
}

@-moz-keyframes color {
0%   { background-color: #0000ff; }
50%  { background-color: #0000ff; }
100% { background-color: #ffff00; }
}

@-o-keyframes color {
0%   { background-color: #0000ff; }
50%  { background-color: #0000ff; }
100% { background-color: #ffff00; }
}

---

0 per risposta № 3

Penso che questo potrebbe essere quello che state cercando. http://www.acuras.co.uk/articles/53-javascript--css-flashing-text--how-to-do-it--why-not-to-do-it

Onestamente, non ho idea perché avete bisogno di un tale collegamento, farà solo il tuo sito sembra che è stata fatta da un principiante assoluto, perché è molto fastidioso.Ci sono molto più belle animazioni e plugin non mancano, soprattutto se si utilizza jQuery.Check this out per ispirazione: http://bestofjquery.com/

---