Как применить обратный фильтр, когда мышь покидает элемент в css?

Question

У меня есть этот код:

<style> 

    .huerotate:hover { 
     -webkit-filter: hue-rotate(235deg); 
     -webkit-transition: all 5s ease; 
    } 
</style> 

    <img class="huerotate" src="/images/header.png" alt="My Image"> 

Селектор :hover будет применяться к элементу, а мышь находится над ним, то, что CSS атрибут следует использовать для мыши из, чтобы применить фильтр в обратном направлении?

Jsfiddle link

Answer 1

без: парить у вас есть «обратный», что вы ищете:

.huerotate{ 
    -webkit-filter: hue-rotate(0deg); 
    -webkit-transition: all 2s ease-in-out; 
} 
.huerotate:hover { 
    -webkit-filter: hue-rotate(235deg); 
    -webkit-transition: all 5s ease; 
} 

Первое нормальное состояние, при наведении курсора ввести в псевдо: парить и когда отпуск мыши введите нормальное состояние

Answer 2

Я собрал пример скрипки, это то, что вы хотите? http://jsfiddle.net/14f7yorh/

.huerotate:hover { 
    -webkit-filter: hue-rotate(235deg); 
    -webkit-transition: all 5s ease; 
} 
.huerotate { 
    -webkit-filter: none; 
    -webkit-transition: all 5s ease; 
}