제거/무시 방법: 터치 장치에서 css 스타일을 호버합니다.
나는 모두 무시하고 싶습니다.:hover사용자가 터치 장치를 통해 우리 웹 사이트를 방문하는 경우 CSS 선언.왜냐하면.:hoverCSS는 말이 되지 않으며, 태블릿이 클릭/탭으로 트리거하면 요소가 초점을 잃을 때까지 고착될 수 있기 때문에 방해가 될 수도 있습니다. 저는 왜 필요성을 .:hover1위 - 하지만 이것은 현실입니다, 그래서 이 문제도 현실입니다.
a:hover {
color:blue;
border-color:green;
/* etc. > ignore all at once for touch devices */
}
CSS를 제거/할 수 ?:hover선언 후 터치 장치에 대한 선언을 한 번에(각자를 알 필요 없이) 수행할 수 있습니까?
tl;dr 사용: https://jsfiddle.net/57tmy8j3/
왜 또는 어떤 다른 옵션이 있는지 관심이 있으면 계속 읽어 보십시오.
Quick'n't dirty - 제거: JS를 사용한 호버 스타일
다을포함는모든하 CSS칙규수있을 포함하는 모든 할 수 .:hoverJavascript 입니다.이는 CSS를 터치할 필요가 없고 구형 브라우저와도 호환이 가능하다는 장점이 있습니다.
function hasTouch() {
return 'ontouchstart' in document.documentElement
|| navigator.maxTouchPoints > 0
|| navigator.msMaxTouchPoints > 0;
}
if (hasTouch()) { // remove all the :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를 손상시키는 서피스 또는 iPad Pro와 같은 혼합 마우스 및 터치 장치에서 호버를 비활성화합니다.
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 규칙을 재정의해야 합니다.두 가지 모두 혼합 마우스 및 터치 장치와 호환되지 않습니다.
가장 강력한 - JS를 통한 터치 감지 및 CSS 추가 :호버 규칙
에 이메드호규버앞다추합에니다가야해음을칙모든을 붙여야 합니다.body.hasHover또는선택클이래름스한이)름▁name또
body.hasHover a:hover { color: blue; }
그hasHover클래스는 다음을 사용하여 추가할 수 있습니다.hasTouch() 예 " 번째예첫예":
if (!hasTouch()) document.body.className += ' hasHover'
그러나, 이것은 혼합 터치 장치에 대한 이전의 예와 동일한 단점이 있을 것이며, 이는 궁극적인 해결책을 제시합니다.마우스 커서를 이동할 때마다 호버 효과 사용, 터치가 감지될 때마다 호버 효과 사용 안 함
function watchForHover() {
// lastTouchTime is used for ignoring emulated mousemove events
let lastTouchTime = 0
function enableHover() {
if (new Date() - lastTouchTime < 500) return
document.body.classList.add('hasHover')
}
function disableHover() {
document.body.classList.remove('hasHover')
}
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/57tmy8j3/
레거시(이전 브라우저와 함께 사용): https://jsfiddle.net/dkz17jc5/19/
2020 솔루션 - CSS 전용 - Javascript 없음
미디어 포인터로 미디어 호버를 사용하면 이 문제를 해결하는 데 도움이 됩니다.Chrome Web 및 Android 모바일에서 테스트되었습니다.나는 이 오래된 질문을 알고 있었지만 이런 해결책을 찾지 못했습니다.
@media (hover: hover) and (pointer: fine) {
a:hover { color: red; }
}<a href="#" >Some Link</a>CSS 미디어 기능을 복구로 이동합니다!CSS만 사용하면 장치에 다음이 없을 때 스타일을 재정의할 수 있습니다.hover성능.
/* hover query styles */
a {
color: red;
font-size: 3em;
}
a:hover {
color: blue;
}
@media (hover: none) {
a:link,
a:visited {
color: blue;
text-decoration: none;
border: 0.1em solid currentColor;
padding: 0 0.1em;
}
}
/* used to show if demo browser has hover capabilities */
.detection:before {
content: 'UNKNOWN';
color: red;
}
@media(hover) {
.detection:before {
content: 'YES';
color: green;
}
}
@media (hover: none) {
.detection:before {
content: 'NO';
}
}<p>Hoverable pointer detected: <span class="detection"></span></p>
<h3>Experiences between device hover capabilities</h3>
<p>If the device has a hover capability, the link below:</p>
<ul>
<li>should be red</li>
<li>should be blue when hovered</li>
</ul>
<p>If the device does not have a hover capability, the link below:</p>
<ul>
<li>should always be blue</li>
<li>should be surrounded by a blue border</li>
</ul>
<p><a href="https://www.google.com">Link</a></p>참고: Surface PC의 기본 입력(기능)은 마우스이므로 분리된(태블릿) 화면이라도 파란색 링크가 됩니다.브라우저는 항상 가장 정확한 입력 기능으로 기본 설정됩니다.
Jason의 답변에 따르면 호버를 지원하지 않는 장치만 순수한 CSS 미디어 쿼리로 처리할 수 있습니다.또한 유사한 질문에 대한 무갈의 답변과 같이 호버를 지원하는 장치만 다음과 같이 처리할 수 있습니다.@media not all and (hover: none)이상해 보이지만 효과가 있습니다.
저는 더 쉽게 사용할 수 있도록 이것으로 Sass 믹스를 만들었습니다.
@mixin hover-supported {
@media not all and (hover: none) {
&:hover {
@content;
}
}
}
2019-05-15 업데이트: 저는 CSS로 대상으로 삼을 수 있는 모든 다른 장치를 거치는 미디엄의 이 기사를 추천합니다.기본적으로 다음과 같은 미디어 규칙을 혼합하여 특정 대상에 결합합니다.
@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 on-hover {
@media (hover: hover) and (pointer: fine) {
&:hover {
@content;
}
}
}
button {
@include on-hover {
color: blue;
}
}
저도 (삼성 모바일 브라우저의 경우) 동일한 문제에 직면하여 이 문제를 우연히 발견했습니다.
칼살의 답변 덕분에 저는 제가 시도한 모바일 브라우저에서 인식되는 것 같기 때문에 사실상 모든 데스크톱 브라우저를 제외할 것이라고 믿는 것을 발견했습니다(컴파일된 표의 스크린샷: CSS 포인터 기능 감지 표 참조).
포인터 CSS @media 기능은 사용자의 기본 입력 메커니즘이 포인팅 장치인지 여부에 따라 스타일을 적용하는 데 사용될 수 있으며, 그렇다면 얼마나 정확한지에 따라
.
제가 발견한 것은 포인터: 거친 것은 첨부된 표의 모든 데스크톱 브라우저에서는 알 수 없지만 동일한 표의 모든 모바일 브라우저에서는 알 수 있는 것입니다.다른 모든 포인터 키워드 값은 일관성 없는 결과를 제공하기 때문에 가장 효과적인 선택인 것 같습니다.
따라서 칼살이 설명했지만 약간 수정된 것과 같은 미디어 쿼리를 구성할 수 있습니다.반대 논리를 사용하여 모든 터치 장치를 배제합니다.
새스 믹스인:
@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;
}
}
그것은 또한 제가 문제를 연구한 후에 만든 이 요지에 설명되어 있습니다.경험적 연구를 위한 코드펜.
업데이트(2018):이 업데이트, 2018-08-23을 작성하고 @DmitriPavlut이 이 기술에서 지적한 바로는 Firefox 데스크톱에서 더 이상 작동하지 않는 것 같습니다.
업데이트(2021):파이어폭스 87에서 작동하는 것으로 보인다는 지적이 있었습니다.
저는 현재 비슷한 문제를 처리하고 있습니다.
(1) 사용자 문자열 검사 또는 (2) 다른 URL을 사용하여 별도의 모바일 페이지를 유지하고 사용자가 더 나은 것을 선택하도록 하는 두 가지 주요 옵션이 있습니다.
- 만약 당신이 PHP나 Ruby와 같은 인터넷 덕트 테이프 언어를 사용할 수 있다면, 당신은 페이지를 요청하는 장치의 사용자 문자열을 확인할 수 있고, 단지 같은 콘텐츠를 제공하지만,
<link rel="mobile.css" />일반적인 스타일 대신에.
사용자 문자열에는 브라우저, 렌더러, 운영 체제 등에 대한 식별 정보가 있습니다."터치" 장치와 "터치" 장치가 아닌 장치를 결정하는 것은 사용자에게 달려 있습니다.사용 가능한 정보를 찾아 시스템에 매핑할 수 있습니다.
A. 할 수 있다면, 이전 브라우저를 무시하고 일반적인 비모바일 CSS에 단일 규칙을 추가하면 됩니다. 즉, 다음과 같습니다. 편집: 음. 몇 가지 실험을 한 후, 저는 아래 규칙이 미적 효과를 비활성화시키는 것뿐만 아니라 웹킷 웹사이트의 링크를 따르는 기능도 비활성화한다는 것을 발견했습니다 - http://jsfiddle.net/3nkcdeao/ 참조.
따라서 모바일 사례에 대한 규칙을 수정하는 방법에 대해서는 제가 여기서 설명하는 것보다 좀 더 선택적으로 고려해야 합니다. 하지만 유용한 시작점이 될 수도 있습니다.
* {
pointer-events: none !important; /* only use !important if you have to */
}
를 사용하지 않도록 하면 현재 ▁as▁a▁to-▁enters▁hoverlement-▁disabling▁parent▁again▁on▁if▁causes,▁and▁a▁them▁the▁onents활▁any▁pointeren▁activeeffects▁parent다▁child니다됩▁sidote▁currently화▁then성시▁a효참evly▁become▁child▁enabling가과고▁on▁ae▁explicit호버:hover.
http://jsfiddle.net/38Lookhp/5/ 을 참조하십시오.
렌더러를 B 중에 더 . 레거시 웹 렌더러를 지원하는 경우 다음 기간 동안 특수 스타일을 설정하는 규칙을 제거하는 작업을 조금 더 수행해야 합니다.:hover모든 사용자의 시간을 절약하기 위해 표준 스타일 시트에서 실행하는 자동 복사 + 시드 명령을 만들어 모바일 버전을 만드는 것이 좋습니다.이렇게 하면 표준 코드를 작성/업데이트하고 다음을 사용하는 모든 스타일 규칙을 삭제할 수 있습니다.:hover사용자 페이지의 모바일 버전에 대해야 합니다.
- 또는 사용자에게 website.com 이외에 모바일 장치용 m.website.com 도 있다는 사실을 알리기만 하면 됩니다.하위 도메인이 가장 일반적인 방법이지만 모바일 사용자가 수정된 페이지에 액세스할 수 있도록 지정된 URL을 다른 예측 가능한 방식으로 수정할 수도 있습니다.이 단계에서는 사이트의 다른 부분으로 이동할 때마다 URL을 수정할 필요가 없습니다.
여기서도 스타일시트에 규칙을 한두 개 추가하거나 sed 또는 유사한 유틸리티를 사용하여 약간 더 복잡한 작업을 수행해야 할 수 있습니다.아마도 적용하는 것이 가장 쉬울 것입니다: 다음과 같은 스타일링 규칙에 적용하지 않습니다.div:not(.disruptive):hover {...에 추할수있위치를 할 수 .class="disruptive"CSS를 뭉개는 대신 js나 서버 언어를 사용하는 모바일 사용자를 위해 성가신 일을 하는 요소.
(II) 처음 두 가지를 실제로 결합할 수 있으며 (사용자가 잘못된 버전의 페이지로 이동한 것으로 의심되는 경우) 모바일 유형 디스플레이로 전환하거나 사용자가 앞뒤로 이동할 수 있는 링크를 제공할 수 있습니다.이미 언급했듯이, @media 쿼리는 방문할 때 사용되는 항목을 결정하는 데 사용할 수도 있습니다.
(III) 어떤 장치가 "터치"이고 어떤 장치가 그렇지 않은지 알게 되면 jQuery 솔루션을 선호하는 경우 터치 스크린 장치에서 CSS 호버가 무시되지 않는 것이 유용할 수 있습니다.
사용해 보십시오.
@media (hover:<s>on-demand</s>) {
button:hover {
background-color: #color-when-NOT-touch-device;
}
}
업데이트: 안타깝게도 W3C는 사양에서 이 속성을 제거했습니다(https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1) .
Modernizr 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;
}
현재 답변을 IE11에서도 사용할 수 있도록 하려면(그래도 지원하는 경우):
@media (hover: hover) and (pointer: fine), only screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
a:hover { color: red; }
}<a href="#" >Some Link</a>이전 답변들을 검토해 본 결과, 이것이 저에게 효과가 있었습니다.이 호버는 호버가 있는 데스크톱에만 사용할 수 있습니다.이 클래스/ID에 대한 다른 호버 코드가 있으면 제거합니다.
@media (hover: hover) {
.toggle-label:hover {
background-color: #69c9ff;
color: #ffffff;
}
}
저에게 도움이 되었습니다:
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");
}
}
}
}
}
}
이지만, 하고 이은를또가해지만이결책, 당의신다검고것추할니입가야해하당토것신을 해야 할 입니다..no-touch호버 스타일 앞에 클래스를 지정합니다.
Javascript:
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 상태를 비활성화하고 문서에서 마우스 이동 이벤트가 감지되면 활성화합니다.물론 누군가가 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");
});
사용해 보십시오(이 예에서는 배경 및 배경색을 사용합니다).
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;
}
더러운 방법은...우아하지는 않지만, 당신을 구할 수 있는 가장 쉬운 방법입니다.
호버의 특징을 나타내는 모든 것을 제거합니다.
.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;
}
}
만약 당신의 문제가 안드로이드와 파란색 투명색으로 뒤덮인 전체 디브를 터치/탭할 때라면!그러면 당신은 그냥 그것을 바꾸어야 합니다.
커서 : 포인터; 커서로 : 기본값;
mediaQuery를 사용하여 휴대폰/태블릿에 숨깁니다.
이것은 나에게 효과가 있습니다.
미디어 포인터로 미디어 호버를 사용하면 이 문제를 해결하는 데 도움이 됩니다.
@media (hover: none) and (pointer: coarse) {
/* Smartphones and touchscreens */
}
이 쉬운 2019년식 jquery 솔루션을 사용해 보십시오. 시간이 꽤 흘렀지만;
헤드에 이 플러그인 추가:
src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js "
js에 추가:
$("*."on"), 함수(e) {$(이것).포커스(()); }); //모든 요소에 적용
이에 대해 제안된 몇 가지 변형은 다음과 같습니다.
$(:input,:syschend")에서, 함수(e) {(이것).포커스);}); //요소 표시
$("*"." 클릭, 종료"), 함수(e) {$(이것).포커스(()); }); //클릭 이벤트 선택
css: body { cursor: pointer; } //아무 곳이나 터치하여 포커스를 종료합니다.
메모들
- 도구 설명에 영향을 주지 않도록 bootstrap.js 앞에 플러그인 배치
- Safari 또는 Chrome을 사용하여 iphone XRios 12.1.12 및 ipad 3 ios 9.3.5에서만 테스트되었습니다.
참조:
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' 카테고리의 다른 글
| MariaDB가 충돌하는 이유를 찾는 방법은 무엇입니까? (0) | 2023.08.29 |
|---|---|
| 일반 오류 해결 방법: 2006 MySQL 서버가 사라졌습니다. (0) | 2023.08.29 |
| 플럭스를 올바르게 읽고 단일 입력 스트림으로 변환하는 방법 (0) | 2023.08.29 |
| 안드로이드에서 현재 전경 활동 컨텍스트를 얻는 방법은 무엇입니까? (0) | 2023.08.29 |
| 날짜 범위 사이의 데이터 찾기 (0) | 2023.08.29 |