사용자가 버튼을 클릭하면 마우스 버튼을 누르고있는 동안 스타일이 변경되도록 버튼을 만들려고합니다. 모바일 브라우저에서 터치하면 비슷한 방식으로 스타일을 변경하고 싶습니다. 나에게 겉보기에 명백한 것은 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;
}
답변
모바일 터치 스크린 버튼 스타일링에 문제가있었습니다. 이렇게하면 호버 스틱 / 활성 버튼 문제가 해결됩니다.
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>