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


115
.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/


Я использую Safari, и он отлично работает, даже когда я оставляю объект с мышью ... В чем проблема?
AleVale94

Нет, у меня не работает! Переход работает при наведении курсора на красную рамку! Когда красный прямоугольник покидает мышью, он "перескакивает" обратно в полную непрозрачность - я хочу, чтобы он анимировался и при отключении мыши!
Мэтт

Почему бы не использовать фильтр ... caniuse.com/#search=filter
DevWL

Ответы:


202

Вы применяете переходы только к :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

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

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

Я уверен, что это можно сделать с помощью jQquery. Просто я не тот парень, чтобы это делать. :)

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

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

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


Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.