2012-05-12 8 views
83
.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; 
    } 

왜 내가 마우스를 가져 갔을 때 불투명도 만 움직이게하지만 마우스를 사용하여 개체를 떠날 때가 아닌가? 여기CSS : 마우스 아웃시 전환 불투명도?

데모 : http://jsfiddle.net/7uR8z/

+0

... 문제는 무엇인가? – AleVale94

+0

아니, 나를 위해 작동하지 않습니다! 전환은 빨간색 상자를 가리키면 작동합니다. 마우스로 빨간색 상자를 떠날 때 전체 불투명도로 "점프"합니다. 마우스 아웃시에도 애니메이트하기를 원합니다! – matt

+0

필터를 사용하지 않는 이유 ... http://caniuse.com/#search=filter – DevWL

답변

159

당신은 요소 자체에만 :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/

4

나는 FIREFOX unt에서 이걸로 투쟁했다. 내가 편안 해요 CSS/jQuery를 사용하여 해결책을 찾기 위해 관리

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

이 오타를 수정하기 위해 질문을 편집했습니다. –

+3

(btw, 질문을 편집했거나 대답을주는 대신에 주석을 달았어야합니다.) –

+3

@ törzsmókus 그래,하지만 그 대답을 들었을 때 나는 질문을 편집하는 평판이 없었다고 생각합니다. – Sliq

2

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

가 필요

가 될 : 위원장은 난 당신이 단어 불투명도에서 오타를 깨달았다. 최초의 문제 : 엘리먼트가 그 영역 밖에 걸려있는 것처럼 애니 메이팅하는 동안 가시성을 강제로 표시해야했습니다. 그렇게함으로써, 텍스트의 큰 블럭이 애니메이션 동안 컨텐츠 영역 외부에 매달리게되었습니다.

불투명도가 0 인 주 텍스트 요소를 시작하고 addClass을 사용하여 불투명도 1을 주입하고 전환하려면 해결 방법은 다시 클릭 할 때 removeClass입니다.

나는 이것을 할 수있는 모든 jQquery 방법이 있다고 확신한다. 나는 그것을하는 사람이 아니다. :)

그래서 그것은 ... 도움말 모두

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

덕분에 가장 기본적인 형태입니다.

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

확인 바이올린 : 나는 사파리를 사용하고 난 마우스로 객체를 떠날 경우에도이 완벽하게 작동 http://jsfiddle.net/2k3hfwo0/2/

관련 문제