Вопрос по css, css-transitions, css3 – CSS: непрозрачность перехода при наведении мыши?

97
<code>.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;
    }
</code>

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

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

& # X200B;

Нет, у меня не работает! Переход работает, когда я парю над красной рамкой! Когда вы покидаете красную рамку мышью, она "прыгает" вернуться к полной непрозрачности - я хочу, чтобы он анимировался и при наведении мышки! matt
Почему бы не использовать фильтр ...caniuse.com/#search=filter DevWL
Я использую Safari, и он отлично работает, даже когда я оставляю объект мышью ... В чем проблема? AleVale94

Ваш Ответ

3   ответа
180

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

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

http: //jsfiddle.net/2k3hfwo0/2

2

с которым мне удобно. Оригинальная проблема: мне пришлось заставить видимость отображаться во время анимации, так как у меня есть элементы, висящие за пределами области. Таким образом, большие блоки текста теперь висят за пределами области содержимого и во время анимации.

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

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

Так что в самой простой форме ...

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

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

Похожие вопросы