제거 / 무시하는 방법 : 터치 장치에서 CSS 스타일을 호버
:hover사용자가 터치 장치를 통해 웹 사이트를 방문하는 경우 모든 CSS 선언 을 무시하고 싶습니다 . 때문에 :hoverCSS를 이해하고,하지 않는 요소가 포커스를 잃을 때까지 클릭 / 탭에 태블릿 트리거는 다음 스틱 수 있기 때문에 경우에도 방해 할 수있다. 솔직히 말해서 터치 장치 :hover가 처음 에 트리거 할 필요성을 느끼는 이유를 모르겠습니다. 그러나 이것이 현실이므로이 문제도 현실입니다.
a:hover {
color:blue;
border-color:green;
// etc. > ignore all at once for touch devices
}
그렇다면 (어떻게) :hover터치 장치를 선언 한 후 모든 CSS 선언을 한 번에 제거 / 무시할 수 있습니까 (각각을 알 필요없이)?
이 문제에 대한 여러 솔루션이 있습니다.
Quick'n'dirty-JS를 사용하여 : hover 스타일 제거
:hoverJavascript 를 사용하여 포함 된 모든 CSS 규칙을 제거 할 수 있습니다 . 이것은 CSS를 만질 필요가없고 오래된 브라우저와도 호환된다는 장점이 있습니다.
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all :hover stylesheets
try { // prevent exception on browsers not supporting DOM styleSheets properly
for (var si in document.styleSheets) {
var styleSheet = document.styleSheets[si];
if (!styleSheet.rules) continue;
for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
if (!styleSheet.rules[ri].selectorText) continue;
if (styleSheet.rules[ri].selectorText.match(':hover')) {
styleSheet.deleteRule(ri);
}
}
}
} catch (ex) {}
}
제한 사항 : 스타일 시트는 동일한 도메인 에서 호스팅되어야 합니다 (즉, CDN 없음). UX를 손상시키는 Surface와 같은 혼합 마우스 및 터치 장치 에서 호버를 비활성화합니다 .
CSS 전용-미디어 쿼리 사용
모든 : hover 규칙을 @media블록 에 넣으십시오 .
@media (hover: hover) {
a:hover { color: blue; }
}
또는 모든 호버 규칙을 재정의합니다 (이전 브라우저와 호환 됨).
a:hover { color: blue; }
@media (hover: none) {
a:hover { color: inherit; }
}
제한 사항 : WebView를 사용할 때 iOS 9.0 이상, Android 용 Chrome 또는 Android 5.0 이상에서만 작동합니다. hover: hover이전 브라우저에서 호버 효과를 중단 hover: none하고 이전에 정의 된 모든 CSS 규칙을 재정의해야합니다. 둘 다 혼합 마우스 및 터치 장치와 호환되지 않습니다 .
가장 강력한-특수 CSS 클래스를 사용하고 JS를 통해 터치를 감지합니다.
이 방법은 모든 호버 규칙 앞에 body.hasHover. (또는 원하는 클래스 이름)
body.hasHover a:hover { color: blue; }
hasHover클래스를 사용하여 첨가 될 수있다 hasTouch()첫 번째 예에서 :
if (!hasTouch()) {
document.body.className += ' hasHover';
}
그러나 이것은 혼합 터치 장치에서 이전 예제와 동일한 문제가 있으므로 궁극적 인 솔루션을 제공합니다. 마우스 커서를 움직일 때마다 호버 효과를 활성화하고 터치가 감지 될 때마다 호버 효과를 비활성화합니다.
function watchForHover() {
var hasHoverClass = false;
var container = document.body;
var lastTouchTime = 0;
function enableHover() {
// filter emulated events coming from touch events
if (new Date() - lastTouchTime < 500) return;
if (hasHoverClass) return;
container.className += ' hasHover';
hasHoverClass = true;
}
function disableHover() {
if (!hasHoverClass) return;
container.className = container.className.replace(' hasHover', '');
hasHoverClass = false;
}
function updateLastTouchTime() {
lastTouchTime = new Date();
}
document.addEventListener('touchstart', updateLastTouchTime, true);
document.addEventListener('touchstart', disableHover, true);
document.addEventListener('mousemove', enableHover, true);
enableHover();
}
watchForHover();
이것은 기본적으로 모든 브라우저에서 작동하며 필요에 따라 호버 스타일을 활성화 / 비활성화합니다. 여기에서 시도하십시오 : https://jsfiddle.net/dkz17jc5/19/
구조에 대한 포인터 적응 !
이것은 한동안 다루지 않았으므로 다음을 사용할 수 있습니다.
a:link {
color: red;
}
a:hover {
color:blue;
}
@media (hover: none) {
a:link {
color: red;
}
}
데스크톱 브라우저와 휴대폰 브라우저 모두 에서이 데모를 확인하십시오 . 최신 터치 장치에서 지원됩니다 .
참고 : Surface PC의 기본 입력 (기능)은 마우스이므로 분리 된 (태블릿) 화면이더라도 결국 파란색 링크가됩니다. 브라우저는 항상 가장 정확한 입력 기능을 기본값으로 사용합니다.
나는 현재 비슷한 문제를 다루고 있습니다.
나에게 즉시 나타나는 두 가지 주요 옵션이 있습니다. (1) 사용자 문자열 검사 또는 (2) 다른 URL을 사용하여 별도의 모바일 페이지를 유지하고 사용자가 더 나은 것을 선택하도록하는 것입니다.
- PHP 또는 Ruby와 같은 인터넷 덕트 테이프 언어를 사용할 수 있다면 페이지를 요청하는 장치 의 사용자 문자열 을 확인 하고 단순히 동일한 콘텐츠를 제공하지만
<link rel="mobile.css" />일반 스타일 대신을 사용할 수 있습니다.
사용자 문자열에는 브라우저, 렌더러, 운영 체제 등에 대한 식별 정보가 있습니다. "터치"장치와 비 터치 장치를 결정하는 것은 사용자의 몫입니다. 어딘가에서이 정보를 찾아 시스템에 매핑 할 수 있습니다.
A. 이전 브라우저 를
무시할 수있는 경우 일반 비 모바일 CSS에 단일 규칙, 즉 EDIT : Erk 를 추가하기 만하면
됩니다. 참조 - 어떤 실험을하고 후에, 나는 규칙 아래는 단지 비활성화 된 미적 효과를 유발하는 것 외에도 웹킷 브라우저에서 링크를 따라 할 수있는 기능 비활성화 발견 http://jsfiddle.net/3nkcdeao/
당신은 할 것 같은를 여기에서 보여준 것보다 모바일 케이스의 규칙을 수정하는 방법에 대해 좀 더 선택적이기는하지만 도움이되는 시작점이 될 수 있습니다.
* {
pointer-events: none !important; /* only use !important if you have to */
}
부수적으로, 부모에서 포인터 이벤트를 비활성화 한 다음 자식에서 명시 적으로 활성화하면 현재 자식 요소가으로 들어가면 부모에 대한 호버 효과가 다시 활성화됩니다 :hover. http://jsfiddle.net/38Lookhp/5/
참조
B. 레거시 웹 렌더러를 지원하는 경우 .NET Framework 동안 특수 스타일을 설정하는 모든 규칙을 제거하는 작업을 더 많이 수행해야합니다 :hover. 모든 사람의 시간을 절약하기 위해 표준 스타일 시트에서 실행 하는 자동 복사 + sed sed 명령 을 빌드 하여 모바일 버전을 만들 수 있습니다. 그러면 표준 코드를 작성 / 업데이트하고 :hover페이지의 모바일 버전에 사용되는 스타일 규칙을 제거 할 수 있습니다 .
- (I) 또는 웹 사이트 .com 외에 모바일 장치 용 m.website.com 이 있다는 사실을 사용자에게 알리 십시오 . 하위 도메인 지정이 가장 일반적인 방법이지만 모바일 사용자가 수정 된 페이지에 액세스 할 수 있도록 지정된 URL을 예측 가능한 다른 수정 방법으로 사용할 수도 있습니다. 이 단계에서 사이트의 다른 부분으로 이동할 때마다 URL을 수정할 필요가 없는지 확인하고 싶을 것입니다.
여기서도 스타일 시트에 규칙을 한두 개 더 추가 하거나 sed 또는 유사한 유틸리티를 사용하여 약간 더 복잡한 작업을 수행 할 수 있습니다 . CSS를 엉망으로 만드는 대신 js 또는 서버 언어를 사용하여 모바일 사용자를 위해 성가신 일을하는 요소에 div:not(.disruptive):hover {...추가 class="disruptive"하는 스타일링 규칙에 적용하지 않는 것이 가장 쉬울 것입니다.
(II) 실제로 처음 두 개를 결합 할 수 있으며 (사용자가 잘못된 버전의 페이지로 방황 한 것으로 의심되는 경우) 모바일 유형 디스플레이로 전환하거나 이동하는 링크를 제안 할 수 있습니다. 사용자가 앞뒤로 플롭 할 수 있습니다. 이미 언급했듯이 @media 쿼리는 방문에 사용되는 항목을 결정하는 데 사용되는 것으로 보일 수도 있습니다.
(III) 어떤 장치가 "터치"이고 어떤 장치가 아닌지 알고 나면 jQuery 솔루션을 사용하는 경우 터치 스크린 장치에서 CSS 호버가 무시되지 않는 것이 도움이 될 수 있습니다.
나는 같은 문제 (내 경우 삼성 모바일 브라우저에서)에 직면 하여이 질문을 우연히 발견했습니다.
Calsal의 답변 덕분에 내가 시도한 모바일 브라우저에서 인식되는 것처럼 보이기 때문에 거의 모든 데스크톱 브라우저를 제외 할 것이라고 생각되는 것을 발견했습니다 (컴파일 된 테이블의 스크린 샷 : CSS 포인터 기능 감지 테이블 참조 ).
MDN 웹 문서 는
포인터 CSS @media 기능을 사용하여 사용자의 기본 입력 메커니즘이 포인팅 장치인지 여부와 그렇다면 얼마나 정확한지에 따라 스타일을 적용 할 수 있습니다.
.
내가 발견 한 것은 포인터입니다. coarse 는 첨부 된 테이블의 모든 데스크톱 브라우저에는 알려지지 않았지만 동일한 테이블의 모든 모바일 브라우저에는 알려진 것입니다. 다른 모든 포인터 키워드 값이 일관성없는 결과를 제공하기 때문에 이것은 가장 효과적인 선택 인 것 같습니다.
따라서 Calsal 과 같은 미디어 쿼리를 구성 할 수 있지만 약간 수정되었습니다. 모든 터치 장치를 배제하기 위해 역 논리를 사용합니다.
Sass 믹스 인 :
@mixin hover-supported {
/*
* https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer
* coarse: The primary input mechanism includes a pointing device of limited accuracy.
*/
@media not all and (pointer: coarse) {
&:hover {
@content;
}
}
}
a {
color:green;
border-color:blue;
@include hover-supported() {
color:blue;
border-color:green;
}
}
컴파일 된 CSS :
a {
color: green;
border-color: blue;
}
@media not all and (pointer: coarse) {
a:hover {
color: blue;
border-color: green;
}
}
문제를 조사한 후 만든 이 요점 에도 설명되어 있습니다. 경험적 연구를위한 Codepen .
업데이트 : 2018-08-23이 업데이트를 작성하고 @DmitriPavlutin이 지적한이 기술은 더 이상 Firefox 데스크톱에서 작동하지 않는 것 같습니다.
이 시도:
@media (hover:<s>on-demand</s>) {
button:hover {
background-color: #color-when-NOT-touch-device;
}
}
업데이트 : 안타깝게도 W3C는 사양에서이 속성을 제거했습니다 ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).
당신은 사용할 수 있습니다 모더 나이저 JS (이 참조 StackOverflow의 응답을 ), 또는 사용자 정의 JS 기능을합니다
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if ( is_touch_device() ) {
$('html').addClass('touch');
} else {
$('html').addClass('no-touch');
}
브라우저에서 터치 이벤트 지원 을 감지 한 다음 다음 CSS과 같이 html.no-touch클래스 와 함께 요소를 순회 하는 일반 속성 을 할당합니다 .
html.touch a {
width: 480px;
}
/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
width: auto;
color:blue;
border-color:green;
}
이것은 또한 가능한 해결 방법이지만 CSS .no-touch를 살펴보고 호버 스타일 앞에 클래스를 추가 해야합니다.
자바 스크립트 :
if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}
CSS 예 :
<style>
p span {
display: none;
}
.no-touch p:hover span {
display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>
추신하지만 기억해야 할 점은 동시에 마우스 입력을 지원하는 터치 장치가 점점 더 시장에 출시되고 있다는 것입니다.
이것은 아직 완벽한 솔루션이 아닐 수도 있지만 (jQuery와 함께) 작업 할 방향 / 개념 일 수 있습니다. 다른 방법으로 수행하는 것은 어떻습니까? 즉, 기본적으로 : hover css 상태를 비활성화하고 mousemove 이벤트가 문서의 어느 곳에서나 감지되면 활성화합니다. 물론 누군가 js를 비활성화하면 작동하지 않습니다. 이런 식으로하는 것에 반대하는 또 다른 것은 무엇입니까?
아마도 다음과 같습니다.
CSS :
/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
color:blue;
border-color:green;
}
jQuery :
/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
$("html").addClass("mousedetected");
});
Jason의 답변 에 따르면 순수한 CSS 미디어 쿼리로 hover를 지원하지 않는 장치 만 처리 할 수 있습니다. 유사한 질문에 대한 moogal의 대답 과 같이 hover를 지원하는 장치 만 @media not all and (hover: none). 이상하게 보이지만 작동합니다.
더 쉽게 사용할 수 있도록 Sass 믹스 인을 만들었습니다.
@mixin hover-supported {
@media not all and (hover: none) {
&:hover {
@content;
}
}
}
업데이트 2019-05-15 : CSS로 타겟팅 할 수있는 모든 다른 장치를 통과하는 Medium의이 기사를 추천 합니다 . 기본적으로 다음과 같은 미디어 규칙이 혼합되어 있으며 특정 대상에 대해 결합합니다.
@media (hover: hover) {
/* Device that can hover (desktops) */
}
@media (hover: none) {
/* Device that can not hover with ease */
}
@media (pointer: coarse) {
/* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
/* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
/* Device with no pointing */
}
특정 대상의 예 :
@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */
}
@media (hover: hover) and (pointer: fine) {
/* Desktops with mouse */
}
나는 믹스 인을 좋아한다. 이것이 내가 사용하는 방법이다.
@mixin is-touch {
@media (hover: none) and (pointer: coarse) {
@content;
}
}
저에게 도움이되었습니다 : 링크
function hoverTouchUnstick() {
// Check if the device supports touch events
if('ontouchstart' in document.documentElement) {
// Loop through each stylesheet
for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
var sheet = document.styleSheets[sheetI];
// Verify if cssRules exists in sheet
if(sheet.cssRules) {
// Loop through each rule in sheet
for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
var rule = sheet.cssRules[ruleI];
// Verify rule has selector text
if(rule.selectorText) {
// Replace hover psuedo-class with active psuedo-class
rule.selectorText = rule.selectorText.replace(":hover", ":active");
}
}
}
}
}
}
이것을 시도하십시오 (이 예에서는 배경색과 배경색을 사용합니다).
var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');
if (ClickEventType == 'touchstart') {
$('a').each(function() { // save original..
var back_color = $(this).css('background-color');
var background = $(this).css('background');
$(this).attr('data-back_color', back_color);
$(this).attr('data-background', background);
});
$('a').on('touchend', function(e) { // overwrite with original style..
var background = $(this).attr('data-background');
var back_color = $(this).attr('data-back_color');
if (back_color != undefined) {
$(this).css({'background-color': back_color});
}
if (background != undefined) {
$(this).css({'background': background});
}
}).on('touchstart', function(e) { // clear added stlye="" elements..
$(this).css({'background': '', 'background-color': ''});
});
}
css :
a {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
The dirty way... Not elegant, but the easiest way that can save you.
Remove anything that characterizes the hover.
.your-class:hover:before {
color: blue;
background: linear-gradient(to bottom, rgba(231,56,39,0) 0%, #aaaaaa 100%);
}
@media all and (min-width:320px) and (max-width: 960px) {
.your-class:hover:before {
color: black;
background: transparent;
}
}
Try this easy 2019 jquery solution, although its been around a while;
add this plugin to head:
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
add this to js:
$("*").on("touchend", function(e) { $(this).focus(); }); //applies to all elements
some suggested variations to this are:
$(":input, :checkbox,").on("touchend", function(e) {(this).focus);}); //specify elements
$("*").on("click, touchend", function(e) { $(this).focus(); }); //include click event
css: body { cursor: pointer; } //touch anywhere to end a focus
Notes
- place plugin before bootstrap.js to avoif affecting tooltips
- only tested on iphone XR ios 12.1.12, and ipad 3 ios 9.3.5, using Safari or Chrome.
References:
https://api.jquery.com/category/selectors/jquery-selector-extensions/
참고URL : https://stackoverflow.com/questions/23885255/how-to-remove-ignore-hover-css-style-on-touch-devices
'Programing' 카테고리의 다른 글
| BaseStream을 닫지 않고 StreamWriter를 닫는 방법이 있습니까? (0) | 2020.08.12 |
|---|---|
| 버전 제어에 Xcode 작업 공간 체계 추가 (0) | 2020.08.12 |
| 파일 이름으로 사용하기 위해 Java에서 문자열을 안전하게 인코딩하는 방법은 무엇입니까? (0) | 2020.08.12 |
| 자녀 수를 어떻게 셀 수 있습니까? (0) | 2020.08.12 |
| Firebase FCM은 onTokenRefresh ()를 강제로 호출합니다. (0) | 2020.08.12 |