현재 CSS 전환 작업 중이며 모바일 장치에서 제대로 작동하도록 적절한 자바 스크립트를 찾기 위해 고심하고 있습니다. http://seancrater.com/test/ "The Dirty Dozen Plus"섹션에서 전환을 볼 수 있습니다. 현재 ontouchstart = "this.classList.toggle ('hover'); 이 각 DIV에 추가되었지만 현재는 전환 상태를 유지하기 위해 휴대 기기에서 손가락을 누르고 있어야합니다. 아무도 나를 전환 상태에서 머물 수 있도록 한 번의 클릭으로 만드는 방법에 대한 통찰력을 줄 수 있는지 궁금 해서요. 나는 의사를 시도 : 모든 기능을 함께 작동 중지 그것 고마워요! - 누이이 CSS 전환이 iPhone에서 제대로 작동하지 않습니다.
다른 사람이 언급 한 것처럼, 당신이하지 않도록해야합니다 : 호버합니다.
문제를 해결하는 가장 쉬운 방법은 다음처럼 CSS를 업데이트하는 것입니다 : touchstart 또는 touchend에 당신의 요소에 클래스와
.top:hover,
.top.touched {
-webkit-transform:translateY(-150px);
-webkit-transition: all .5s;
}
그리고 추가 touched. 내 생각 엔 사용자가 현재 터치 된 요소를 유지 관리해야하므로 사용자가 다른 요소를 스크롤하거나 터치 할 때 전환 된 상태를 제거 할 수 있습니다.
(편집 : 업데이트 된 바이올린은 사용자가 가까운 요소를 활용할 수 있도록)
http://jsfiddle.net/4n6Z4/1/
쉘, 스마트 폰에서 쉽게 테스트 :
http://fiddle.jshell.net/4n6Z4/1/show/
ontouchstart="this.classList.toggle('click'); 휴대 전화에 호버 이벤트가없는 경우 호버 이벤트를 휴대 전화의 클릭 이벤트로 전환해야합니다. 자바 스크립트를 사용하여 휴대 전화인지 여부를 감지하고 상수 인 var phone = false을 설정하고 전화 인 경우 true로 설정하고 그렇지 않다면 거짓으로 남습니다. 그런 다음 컨트롤이나 트리거를 사용하는 함수에서 사용하십시오 그 애니메이션.
휴대 전화에서 마우스를 올리면 사용할 수 없습니다. 자세한 정보
아시겠지만 : hover 동작은 터치 스크린 장치에는 없습니다. 따라서 반응 형 웹 사이트를 디자인 할 때는 과 언제 어디에서 사용할 것인가 : 호버 상호 작용을 신중하게 계획해야합니다. 약간의 URL을 열어주는 간단한 링크 일부 터치 스크린 장치에 대한 : 호버 효과가 느슨해집니다. iOS의 경우 : 클릭 이벤트 이전에 호버가 트리거되므로 잠시 후 호버 스타일이 페이지가 변경되기 전에 표시됩니다. 이들은 사소한 것일 뿐이므로 사이트 기능에 영향을주지 않습니다. 실제 문제는 표시 또는 가시성 CSS 속성을 사용하여 다른 요소를 숨기거나 표시하는 호버 (hover)입니다. 이 유형의 : 마우스를 올리면 이 터치 스크린의 두 번 탭 동작으로 변환됩니다.
http://www.prowebdesign.ro/how-to-deal-with-hover-on-touch-screen-devices/
JSfiddle하시기 바랍니다. –
http://jsfiddle.net/fswGD/ 정말로 올바르게 표시되지 않습니다. –