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

Question 1

사용자가 버튼을 클릭하면 마우스 버튼을 누르고있는 동안 스타일이 변경되도록 버튼을 만들려고합니다. 모바일 브라우저에서 터치하면 비슷한 방식으로 스타일을 변경하고 싶습니다. 나에게 겉보기에 명백한 것은 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를 사용하지 않고 더 간단한 방법이 있는지 궁금합니다.

Question 2

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

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

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

위 링크의 인용문입니다.

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

: hover 의사 클래스는 사용자가 요소 (일부 포인팅 장치 포함)를 지정하는 동안 적용되지만 활성화하지는 않습니다. 예를 들어, 시각적 사용자 에이전트는 커서 (마우스 포인터)가 요소에 의해 생성 된 상자 위로 이동할 때이 의사 클래스를 적용 할 수 있습니다. 대화 형 미디어를 지원하지 않는 사용자 에이전트는이 의사 클래스를 지원할 필요가 없습니다. 대화 형 미디어를 지원하는 일부 준수 사용자 에이전트는이 의사 클래스 (예 : 펜 장치)를 지원하지 못할 수 있습니다.

: active 의사 클래스는 요소가 사용자에 의해 활성화되는 동안 적용됩니다. 예를 들어, 사용자가 마우스 버튼을 눌렀다가 놓는 시간 사이입니다.

: focus 의사 클래스는 요소에 포커스가있는 동안 적용됩니다 (키보드 이벤트 또는 기타 형식의 텍스트 입력 허용).

Question 3

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

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

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

Question 4

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

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>

스 니펫 확장