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/

Сігналы абмеркавання

Ви застосовуєте переходи лише до :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/

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

Рішення полягало в тому, щоб запустити основні текстові елементи з непрозорістю 0 і використовувати addClassдля введення та переходу на непрозорість 1. Потім removeClassпри натисканні знову.

Я впевнений, що існує весь спосіб jQquery для цього. Я просто не той хлопець, який би це робив. :)

Тож у самому простому вигляді ...

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

Дякуємо за допомогу всім.

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

Перевірте загадку: http://jsfiddle.net/2k3hfwo0/2/