Áp dụng hiệu ứng chuyển tiếp trên: hover không: hoạt động

Question

Tôi không chắc chắn nếu nó có thể, nhưng đây là những gì tôi đã làm:

a { 
    background-color: white; 
    transition: all 1s; 
} 

a:hover { 
    background-color: grey; 
} 

a:active { 
    background-color: black; 
} 

Nhưng tôi muốn các hiệu ứng chuyển tiếp không áp dụng trên: hoạt động (chỉ trên the: hover), tôi đã thử điều này:

a { 
    background-color: white; 
} 

a:hover { 
    background-color: grey; 
    transition: all 1s; 
} 

a:active { 
    background-color: black; 
} 

Và kết quả chính xác như nhau (ngoại trừ hiệu ứng không được đảo ngược). Có thể làm điều đó trong CSS đầy đủ.

Cảm ơn!

Answer 1

a { 
    background-color: white; 
    transition: all 1s; 
} 

a:hover { 
    background-color: grey; 
} 

a:active { 
    background-color: black; 
    transition: none; 
} 

đánh dấu:

<menu type=list> 
    <li><a>home</a></li> 
    <li><a>work</a></li> 
    <li><a>contact</a></li> 
    <li><a>about</a></li> 
</menu> 

demo: http://jsfiddle.net/7nwLF/