CSS3 터치 이벤트를 사용한 호버 효과

이미지를 표시하거나 숨기려면 CSS3 호버 및 전환을 사용하고 있습니다. 휴대 기기에서 터치 이벤트에 동일한 전환을 사용하고 싶습니다.CSS3 터치 이벤트를 사용한 호버 효과

기본적으로 첫 번째 터치는 호버 효과 또는 롤오버를 수행하고 위로 터치하면 롤오프가 수행됩니다.

JavaScript를 사용하지 않으려 고합니다. 가장 좋은 옵션이 될 순수한 CSS3로 할 수있는 방법이 있다면.

2011-11-30 mattwallace

당신이 질문은 실제로는 오히려 모호한 것; 나는 당신이 * 어느 방법으로 그것을 할 것인지를 묻고 있는지 확신 할 수 없으며, CSS만으로도 할 수 있을지 모른다. 이 자바 스크립트에서 수행 할 수있는 방법에 대한 자세한 내용을 원한다면 질문을 업데이트하고 내 대답을 업데이트 할 수 있습니다. – rlemon

* 질문 ;-) –

[: active 의사 클래스의 가능한 중복이 작동하지 않습니다. 모바일 사파리] (https://stackoverflow.com/questions/3885018/active-pseudo-class-doesnt-work-in-mobile-safari) – JakeGould

CSS에 :active 가상 클래스를 사용하고 ontouchstart="" 및 onmouseover=""을 body 태그에 추가하십시오.

다음 코드는 내가이 다음의 편집은

<style> 
.boxbutton:active{ 
    -webkit-transform:scale(0.9); 
    -moz-transform:scale(0.9); 
    -ms-transform:scale(0.9); 
    -o-transform:scale(0.9); 
    transform:scale(0.9); 
    -webkit-box-shadow:0px 0px 20px #FFF; 
    -moz-box-shadow:0px 0px 20px #FFF; 
    -o-box-shadow:0px 0px 20px #FFF; 
    box-shadow:0px 0px 20px #FFF; 
} 
</style> 


<body ontouchstart=""> 
    <a href="#teamdiv"> 
     <div class="boxbutton" id="teambb"> 
      <h5>Team</h5> 
     </div> 
    </a> 
</body>

(개에) 공중 선회 또는 (터치 디바이스에서)를 누르고 때 작아과 흰색 빛 버튼이, 내 사이트에서 발췌 더 이상 관련 나는 원래, 잘못된 지침을 삭제 한, 그러나 당신이 전에 여기 있다면 여전히 도움이 될 수 있기 때문에

편집 : 나는 오히려 각 링크에 ontouchstart="" 퍼팅보다 더 많은 수의 안정적인 작동을 발견했다, <body> 태그에 넣으십시오. 그래서 몸 태그는 <body ontouchstart=""> 같이해야하며, 당신의 연결이

<a href="#teamdiv"> 
    <div class="boxbutton" id="teambb"> 
    <h5>Team</h5> 
    </div></a>

편집과 같이 2 : 내가, 당신의 CSS를 복사하고 데스크톱 화면 크기 쿼리를 사용하기보다는, 단지 onMouseover와`추가 알아 낸 = ""을 body 태그에 추가하면 : active 의사 클래스가 마우스로 바탕 화면에서 호출되고 모바일에서의 터치로 호출됩니다. 이렇게하면 미디어 쿼리에 대해 무시할 수 있습니다. 당신이 당신의 HTML 코드를 수정하지 않으려면

출처

2012-10-26 03:23:30

thx는 저에게 효과적입니다. – Mario

이것은 작동합니다. 감사. 그러나 나는 왜 * ontouchstart = ""및 onmouseover = ""에 대한 설명이 원하는 효과를 얻는 것을 좋아할 것입니다. 분명히 나에게는 분명하지 않다. –

글쎄, 내가 설명 할 수있는 가장 좋은 사람은 아니지만 그것이 이해할 수있는 방식이다 : ontouchstart와 onmouseover는 리스너이며, 문제의 요소가 접촉되거나 마우스가 올려 질 때까지 기다린다 (이 경우). 따옴표 안에 이름이 지정된 javascript 함수 여기서는 따옴표를 비워 두어 스크립트가 실행되지 않았지만 리스너가 있기 때문에 웹 브라우저는 여전히 따옴표를 활성화 된 것으로 간주합니다. : active 의사 클래스가 현재 javascript로 활성화되어 있으면 요소에 적용됩니다. 리스너는 : active 의사 클래스가 적용되도록합니다. –

, 당신이 시도 할 수 :

<script> 
    document.body.addEventListener('touchstart',function(){},false); 
</script>

출처

2013-09-06 10:00:12 RyanBay

이것은 작동하지 않습니다. – matthewpavkov

@matthewpavkov 작동하지만 addEventListener가 아니라 addEventListener 여야합니다. –

CSS3 터치 이벤트를 사용한 호버 효과

답변

관련 문제