CSS: непрозрачность перехода при выводе мыши?

.item:hover {
        zoom: 1;
        filter: alpha(opacity=50);
        opacity: 0.5;
        -webkit-transition: opacity .15s ease-in-out;
        -moz-transition: opacity .15s ease-in-out;
        -ms-transition: opacity .15s ease-in-out;
        -o-transition: opacity .15s ease-in-out;
        transition: opacity .15s ease-in-out;
    }

Почему это только оживляет непрозрачность, когда я наводил курсор, но не тогда, когда я оставляю объект с помощью мыши?

Демо здесь: http://jsfiddle.net/7uR8z/

Ответ 1

Вы применяете переходы только к псевдоклассу :hover, а не к самому элементу.

.item {   
  height:200px;
  width:200px;
  background:red; 
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item:hover {
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Демо: http://jsfiddle.net/7uR8z/6/

Если вы не хотите, чтобы переход влиял на событие mouse-over, но только mouse-out, вы можете отключить переходы для состояния :hover:

.item:hover {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

Демо: http://jsfiddle.net/7uR8z/3/

Ответ 2

Кстати, я боролся с этим в FIREFOX, пока не понял, что у вас есть опечатка в непрозрачности слова:

-moz-transition: opactiy .15s ease-in-out;

должно быть

-moz-transition: opacity .15s ease-in-out;

Ответ 3

Мне удалось найти решение с помощью css/jQuery, с которым мне удобно. Оригинальная проблема: мне пришлось заставить видимость отображаться во время анимации, поскольку у меня есть элементы, висящие вне области. Сделав это, большие текстовые фрагменты теперь зависают вне области содержимого во время анимации.

Решение состояло в том, чтобы запустить основные текстовые элементы с непрозрачностью 0 и использовать addClass для ввода и перехода к непрозрачности 1. Затем removeClass при повторном нажатии.

Я уверен, что есть все способы jQquery. Я просто не парень, чтобы это сделать.:)

Итак, в ней самая основная форма...

.slideDown().addClass("load");
.slideUp().removeClass("load");

Спасибо за помощь всем.

Ответ 4

$(window).scroll(function() {    
    $('.logo_container, .slogan').css({
        "opacity" : ".1",
        "transition" : "opacity .8s ease-in-out"
    });
});

Проверьте скрипт: http://jsfiddle.net/2k3hfwo0/2/