[css] 변경 : 모바일 장치에서 터치 / 클릭으로 마우스 오버

Question 1

주변을 둘러 보았지만 원하는 것을 찾을 수 없습니다.

현재 내 페이지에 : hover에 의해 트리거되는 CSS 애니메이션이 있습니다. 미디어 쿼리를 사용하여 페이지의 너비가 700px 이상으로 조정될 때 ‘클릭’또는 ‘터치’로 변경하고 싶습니다.

현재 내가 가지고있는 것은 다음과 같다. http://jsfiddle.net/danieljoseph/3p6Kz/

보시다시피 : hover는 모바일 장치에서 작동하지 않지만 마우스 오버가 아닌 클릭만으로 동일한 방식으로 작동하는지 확인하고 싶습니다.

가능하면 CSS를 사용하고 싶지만 JQuery도 만족합니다.

나는 이것이 매우 쉽다고 느낀다. 그러나 나는 단지 매우 명백한 것을 놓치고있다! 어떤 도움을 주시면 감사하겠습니다.

다음은 CSS 애니메이션입니다.

.info-slide {
  position:absolute;
  bottom:0;
  float:left;
  width:100%;
  background:url(../images/blue-back.png);
  height:60px;
  cursor:pointer;
  overflow:hidden;
  text-align:center;
  transition: height .4s ease-in-out;
  -webkit-transition: height .4s ease-in-out;
  -moz-transition: height .4s ease-in-out;
}

.info-slide:hover {
  height:300px;
}

Question 2

: active 선택기를 : hover와 함께 사용 하면 : hover 선택자 다음에 : active 선택기가 호출되는 한 w3schools 에 따라이를 수행 할 수 있습니다 .

 .info-slide:hover, .info-slide:active{
   height:300px;
 }

모바일 환경에서 FIDDLE 을 테스트해야 합니다. 지금은 할 수 없습니다.

수정 -방금 모바일에서 테스트했는데 잘 작동합니다.

Question 3

onclick=""호버 된 요소에 추가 할 수 있습니다 . 그 후에 Hover가 작동합니다.

편집 :하지만 마크 업과 관련된 어떤 스타일도 추가해서는 안되며 대안으로 게시했습니다.

Question 4

Microsoft Edge 브라우저를 사용하는 모바일 장치에서도 동일한 문제가 발생했습니다. 다음으로 문제를 해결할 수 있습니다 aria-haspopup="true".. 그것은 사업부와에 추가 할 필요가 :hover, :active, :focus다른 모바일 브라우저 용.

예제 html :

<div class="left_bar" aria-haspopup="true">

CSS :

.left_bar:hover, .left_bar:focus, .left_bar:active{
    left: 0%;
    }

Question 5

document.addEventListener("touchstart", function() {}, true);

이 스 니펫은 터치 스크린에 호버 효과를 사용합니다.

Question 6

저는 CSS 멍청하지만 이미지, 링크, 버튼과 같은 “호 버블”요소 인 한 터치 스크린에서 호버가 작동한다는 것을 알아 차 렸습니다. 다음 트릭을 사용하여 CSS로 모든 작업을 수행 할 수 있습니다.

div 배경을 div 내의 실제 이미지 태그로 변경하거나 전체 div 주위에 더미 링크를 생성하면 이미지를 터치 할 때 호버로 등록됩니다.

이렇게하면 페이지의 나머지 부분도 “마우스 오버 가능”상태 여야하므로 이미지 바깥 쪽을 터치하면 info-slide : hover가 종료되었음을 인식합니다. 내 비결은 다른 모든 콘텐츠를 더미 링크로 만드는 것입니다.

우아하지는 않지만 작동합니다.

Question 7

대부분의 장치에서 다른 답변이 작동합니다. 나를 위해,이 근무 보장하기 위해 모든 나는 앵커 태그에 포장했다 (의 반응) 장치 <a>: 다음을 추가
:hover, :focus, :active뿐만 아니라, (순서대로) role="button"와 tabIndex="0".

Question 8

이 간단한 방법이이 목표를 달성 할 수 있다고 생각합니다. CSS를 사용하면 포인터 이벤트를 ‘없음’으로 끈 다음 jQuery를 사용하여 클래스를 전환 할 수 있습니다.

.item{
   pointer-events:none;
 }

.item.clicked{
   pointer-events:inherit;
 }

.item:hover,.item:active{
  /* Your Style On Hover Converted to Tap*/
  background:#000;
}

스 니펫 확장

jQuery를 사용하여 클래스 전환 :

jQuery('.item').click(function(e){
  e.preventDefault();
  $(this).addClass('clicked')l
});

스 니펫 확장