:터치 CSS 유사 클래스 등?

:터치 CSS 유사 클래스 등?

사용자가 버튼을 클릭하면 마우스 버튼을 누른 상태에서 스타일이 변경되도록 버튼을 만들려고 합니다.저도 모바일 브라우저에서 터치하면 비슷한 방식으로 스타일을 바꿨으면 좋겠습니다.제가 보기에 분명한 것은 CSS:active pseudo-class를 사용하는 것이었지만, 그것은 효과가 없었습니다.초점을 맞추려고 노력했지만 역시 효과가 없었습니다.호버를 해봤는데 작동하는 것 같았지만, 버튼에서 손가락을 떼니 스타일이 그대로 유지되었습니다.이 모든 관찰은 아이폰4와 드로이드2에서 이루어졌습니다.

모바일 브라우저(iPhone, iPad, Android 등)에서 효과를 복제할 수 있는 방법이 있습니까?지금은 이런 일을 하고 있습니다.

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

:active pseudo-class는 데스크톱 브라우저용이고 active class는 터치 브라우저용입니다.

자바스크립트를 사용하지 않고 더 간단한 방법이 있는지 궁금합니다.

다음과 같은 것은 없습니다.:touchW3C 사양에서 http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active내 생각엔, 일을 해야 할 것 같아요.

주문하기:active/:hoverpseudo class는 pseudo class가 올바르게 작동하기 위해 중요합니다.

위 링크에서 인용한 내용입니다.

대화형 사용자 에이전트는 때때로 사용자 작업에 대응하여 렌더링을 변경합니다.CSS는 일반적인 경우에 대해 다음과 같은 세 가지 의사 클래스를 제공합니다.

• :hover pseudo-class는 사용자가 요소(일부 포인팅 디바이스 포함)를 지정하는 동안 적용되지만 활성화하지는 않습니다.예를 들어, 시각적 사용자 에이전트는 요소가 생성한 상자 위에 커서(마우스 포인터)가 이동할 때 이 유사 클래스를 적용할 수 있습니다.대화형 미디어를 지원하지 않는 사용자 에이전트는 이 유사 클래스를 지원하지 않아도 됩니다.대화형 미디어를 지원하는 일부 호환 사용자 에이전트는 이 유사 클래스(예: 펜 장치)를 지원하지 못할 수 있습니다.
• :active pseudo-class는 요소가 사용자에 의해 활성화되는 동안 적용됩니다.예를 들어, 사용자가 마우스 버튼을 누른 후 해제하는 시간 사이입니다.
• :focus pseudo-class는 요소에 포커스(키보드 이벤트 또는 기타 텍스트 입력 형식을 허용)가 있는 동안 적용됩니다.

모바일은 호버 피드백을 제공하지 않기 때문에, 저는 사용자로서 링크를 누르면 즉각적인 피드백을 볼 수 있기를 원합니다.나는 그것을 알아챘다.-webkit-tap-highlight-color가장 빠른 응답(주관식)입니다.

다음 내용을 몸에 추가하면 링크가 탭 효과를 얻을 수 있습니다.

body {
    -webkit-tap-highlight-color: #ccc;
}

모바일 터치스크린 버튼 스타일링에 문제가 있었습니다.이렇게 하면 호버스틱/활성 버튼 문제가 해결됩니다.

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>

@gion_13의 많은 지지를 받은 댓글이 문제를 해결해 주었습니다.

더하다ontouchstart=""당신 페이지에 맞게body와 π:active선택기는 터치 스크린에서 예상대로 작동합니다.Chrome에서는 여전히 완벽하지 않습니다.

언급URL : https://stackoverflow.com/questions/6063308/touch-css-pseudo-class-or-something-similar