: 터치 CSS 의사 클래스 또는 비슷한 것?

: 터치 CSS 의사 클래스 또는 비슷한 것?

---

사용자가 클릭하면 마우스 버튼을 누르고있는 동안 스타일이 바뀌도록 버튼을 만들려고합니다. 또한 모바일 브라우저에서 터치하면 비슷한 방식으로 스타일을 변경하고 싶습니다. 나에게 겉보기에 명백한 것은 CSS : active 의사 클래스를 사용하는 것이었지만 작동하지 않았습니다. : focus를 시도했지만 작동하지 않았습니다. 나는 : hover를 시도했는데 작동하는 것 같았지만 버튼에서 손가락을 떼어도 스타일이 유지되었습니다. 이 모든 관찰은 iPhone 4와 Droid 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 의사 클래스는 데스크톱 브라우저 용이고 활성 클래스는 터치 브라우저 용입니다.

Javascript를 사용하지 않고 더 간단한 방법이 있는지 궁금합니다.

---

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

:active 작동해야한다고 생각합니다.

:active/ :hoverpseudo 클래스의 순서 는 올바르게 작동하는 데 중요합니다.

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

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

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

---

모바일은 호버 피드백을 제공하지 않기 때문에 사용자로서 링크를 탭하면 즉각적인 피드백을보고 싶습니다. 나는 그것이 -webkit-tap-highlight-color가장 빨리 응답 한다는 것을 알았습니다 (주관적).

다음을 몸에 추가하면 링크가 탭 효과를 갖습니다.

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

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