Как решить проблему с change()?

Question

[andreyka_g]

Есть текстовое поле, у него стоит три условия прозрачности:

input {
    opacity: .3;
}
input:hover {
    opacity: .6;
}
input:focus {
    opacity: 1;
}

Если в текстовое поле введен текст, то оно должно перестать быть прозрачным, как при focus. Я попробовал реализовать это через jquery change.

$('input').change(function(){
    var $this = $(this);
    if($this.val().length) {
        $this.css('opacity', 1);
    } else {
        $this.css('opacity', .3);
    }
});

Но при этом все остальные условия (hover, focus) перестают выполняться. Как тут быть?
Вот собственно пример:
jsfiddle.net/yn6qp690/1

Answer 1

[Николай]

Потому что вы ставите инлайн стили, а у них приоритет выше чем у правил внутри файла css.
Решение - использовать addClass jsfiddle.net/yn6qp690/4

Comments

[andreyka_g]

Супер, спасибо!