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

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

현재 내 페이지에 : 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;
}

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

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

모바일 환경에서 FIDDLE 을 테스트해야 합니다. 지금은 할 수 없습니다.
수정 -방금 모바일에서 테스트했는데 잘 작동합니다.

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

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

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%;
    }

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

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

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

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

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

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

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

이 간단한 방법이이 목표를 달성 할 수 있다고 생각합니다. 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
});

위의 답변에 동의하지만 여전히 이것을 수행하는 다른 방법이 있으며 media쿼리 를 사용 하는 것입니다.

이것이 당신이 원하는 것이라고 가정하십시오.

body.nontouch nav a:hover {
    background: yellow;
}

그런 다음 미디어 쿼리로 다음과 같이 할 수 있습니다.

@media(hover: hover) and (pointer: fine) {
    nav a:hover {
        background: yellow;
    }
}

자세한 내용은 이 페이지를 참조하십시오.

모바일 터치 스크린 버튼 스타일링에 문제가있는 사람들을위한 CSS 전용 솔루션입니다.

이렇게하면 호버 스틱 / 활성 버튼 문제가 해결됩니다.

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>