program tip

모바일 브라우저에서 호버 효과 비활성화

radiobox 2020. 7. 29. 08:06

모바일 브라우저에서 호버 효과 비활성화

데스크톱과 태블릿 모두에서 사용되는 웹 사이트를 작성 중입니다. 데스크탑에서 방문 할 때 화면의 클릭 가능한 영역이 :hover효과 (다른 배경색 등) 로 밝아지기를 원합니다 . 타블렛에는 마우스가 없으므로 호버 효과가 필요하지 않습니다.

문제는 태블릿에서 무언가를 누를 때 브라우저에 "보이지 않는 마우스 커서"가있어 탭한 위치로 이동 한 다음 그대로 두는 것입니다. 다른 것을 두 드릴 때까지 호버 효과.

마우스를 사용할 때 호버 효과를 얻으려면 어떻게해야합니까? 터치 스크린을 사용할 때 어떻게 가리 킵니까?

누군가가 제안하려고 생각하는 경우 사용자 에이전트 스니핑을 사용하고 싶지 않습니다. 동일한 장치에는 터치 스크린과 마우스가 모두있을 수 있습니다 (오늘은 일반적이지 않지만 미래에는 훨씬 더 그렇습니다). 장치에 관심이없고 현재 사용중인 방식에 관심이 있습니다 : 마우스 또는 터치 스크린.

난 이미 접선 시도 touchstart, touchmove및 touchend이벤트 및 호출 preventDefault()억제은 "보이지 않는 마우스 커서"시간의 일부를 수행하는, 그들 모두에; 그러나 두 개의 다른 요소 사이를 빠르게 앞뒤로 탭하면 몇 번의 탭 후 "마우스 커서"가 움직이고 호버 효과가 점등되기 시작합니다 preventDefault. 항상 영광스럽지 않습니다. 필요한 경우가 아니라면 세부 사항을 알려 드리지 않을 것입니다. 올바른 접근 방식인지 확실하지 않습니다. 누구든지 더 간단한 해결책이 있다면, 나는 모두 귀입니다.

편집 : 이것은 bog 표준 CSS로 재현 할 수 :hover있지만 참조 용 빠른 재현이 있습니다.

<style>
  .box { border: 1px solid black; width: 150px; height: 150px; }
  .box:hover { background: blue; }
</style>
<div class="box"></div>
<div class="box"></div>

상자 중 하나를 마우스로 가리키면 파란색 배경이 표시됩니다. 그러나 상자 중 하나를 탭하면 파란색 배경이 나타납니다. 이것은 내가 방지하려고하는 것입니다.

위의 작업을 수행하고 jQuery의 마우스 이벤트를 연결 하는 샘플도 여기에 게시했습니다 . 또한 화재 것이다 탭 이벤트를 참조하는 데 사용할 수 있습니다 mouseenter, mousemove하고 mouseleave.

호버 효과로 인해 페이지의 내용이 변경된다는 귀하의 질문에 동의합니다. 이 경우 조언은 다음과 같습니다.

touchstart및에 호버 효과를 추가합니다 mouseenter.
에 영향을 가져가 제거 mouseleave, touchmove및 click.

또는 내용이 변경되지 않도록 페이지를 편집 할 수 있습니다.

배경

마우스를 시뮬레이트하기 위해 Webkit mobile과 같은 브라우저는 사용자가 터치 스크린에서 손가락을 터치하고 손가락을 떼면 (예 : iPad) (소스 : html5rocks.com의 Touch And Mouse ) 다음 이벤트를 발생시킵니다 .

touchstart
touchmove
touchend
브라우저가 더블 탭이 아닌 단일 탭인지 확인하는 300ms 지연
mouseover
mouseenter
- 참고 하십시오 경우 mouseover, mouseenter또는 mousemove이벤트 페이지 내용을 변경, 다음 이벤트가 실행되지 않습니다.
mousemove
mousedown
mouseup
click

단순히 웹 브라우저에게 마우스 이벤트를 건너 뛰도록 지시하는 것은 불가능합니다.

더 나쁜 것은, 마우스 오버 이벤트가 페이지 컨텐츠를 변경하면 Safari 웹 컨텐츠 안내서-이벤트 처리 , 특히 One-Finger Events의 그림 6.4에 설명 된대로 클릭 이벤트가 발생하지 않습니다 . "콘텐츠 변경"은 브라우저와 버전에 따라 다릅니다. iOS 7.0의 경우 배경색 변경이 더 이상 콘텐츠 변경이 아님을 발견했습니다.

솔루션 설명

요약하자면:

touchstart및에 호버 효과를 추가합니다 mouseenter.
에 영향을 가져가 제거 mouseleave, touchmove및 click.

에 대한 조치는 없습니다 touchend.

이것은 마우스 이벤트에서 분명히 작동합니다. mouseenter및 mouseleave(약간 개선 된 버전 mouseover및 mouseout)이 실행되고 호버를 추가 및 제거합니다.

사용자가 실제로 click링크하면 호버 효과도 제거됩니다. 이를 통해 사용자가 웹 브라우저에서 뒤로 버튼을 누르면 제거됩니다.

터치 이벤트에서도 작동합니다. 터치 스타트시 호버 효과가 추가됩니다. 터치 엔드에서 '' 'not' ''제거됩니다. 에 다시 추가되며 mouseenter, 이로 인해 컨텐츠가 변경되지 않으므로 (이미 추가 된) click이벤트도 발생하며 사용자가 다시 클릭 할 필요없이 링크가 따라갑니다!

브라우저가 touchstart이벤트 사이에 있고 지연 click시간이 짧은 시간 동안 표시되기 때문에 실제로는 잘 사용됩니다.

사용자가 클릭을 취소하기로 결정한 경우 손가락을 움직이면 정상적으로 작동합니다. 일반적으로 mouseleave이벤트가 발생 하지 않으며 호버 효과가 그대로 유지 되므로 문제 가됩니다. 고맙게도에 대한 호버 효과를 제거하면 쉽게 해결할 수 있습니다 touchmove.

그게 다야!

예를 들어 FastClick 라이브러리 를 사용하여 300ms 지연을 제거 할 수 있지만이 질문의 범위를 벗어납니다.

대체 솔루션

다음 대안에서 다음과 같은 문제를 발견했습니다.

브라우저 감지 : 오류가 발생하기 쉽습니다. 장치에 마우스 또는 터치가 있다고 가정하고 터치 디스플레이가 급증 할 때 두 가지 조합이 점점 더 일반화됩니다.
CSS 미디어 감지 : 내가 아는 유일한 CSS 전용 솔루션입니다. 여전히 오류가 발생하기 쉽고 장치에 마우스 또는 터치가 있지만 모두 가능하다고 가정합니다.
클릭 이벤트 에뮬레이션 touchend: 사용자가 실제로 링크를 클릭하려는 의도없이 스크롤 또는 확대 / 축소 만하려는 경우에도 링크를 잘못 따라갑니다.
변수를 사용하여 마우스 이벤트 억제 : 이 touchend시점에서 해당 상태의 상태 변경을 방지하기 위해 후속 마우스 이벤트에서 조건으로 사용되는 변수를 설정합니다 . 클릭 이벤트에서 변수가 재설정됩니다. 이 페이지에서 Walter Roman의 답변을 참조하십시오. 터치 인터페이스에 호버 효과를 원하지 않는 경우 적절한 솔루션입니다. 불행히도, touchend다른 이유로 인해 a 가 발생하고 클릭 이벤트가 발생 하지 않은 경우 (예 : 사용자가 스크롤하거나 확대 한 경우) 마우스로 링크를 따라 가려고하는 경우 (예 : 마우스와 터치 인터페이스가있는 장치에서) ).

추가 자료

http://jsfiddle.net/macfreek/24Z5M/ . 이 샌드 박스에서 위의 솔루션을 직접 테스트하십시오.
http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . 조금 더 많은 배경을 가진 동일한 대답.
https://www.html5rocks.com/en/mobile/touchandmouse/ . 터치와 마우스에 대한 html5rocks.com의 훌륭한 배경 기사.
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Safari 웹 컨텐츠 안내서-이벤트 처리. 특정 그림 6.4를 참조하십시오.이 그림에서는 mouseover또는 mousemove이벤트 중에 내용이 변경된 후 더 이상 이벤트가 발생하지 않습니다 .

마우스를 사용할 때 호버 효과를 얻으려면 어떻게해야합니까? 터치 스크린을 사용할 때 어떻게 가리 킵니까?

터치 스크린에 대한 호버 효과를 억제하는 것이 아니라 마우스 이벤트에 호버 효과를 추가하는 것으로 생각하지 않습니까?

:hoverCSS에 효과 를 유지하려면 미디어마다 다른 스타일을 지정할 수 있습니다.

@media screen { /* hover styles here */ } 

@media handheld { /* non-hover styles here */ }

불행히도 이것을 무시하고 화면 규칙을 사용하는 많은 모바일 장치가 있습니다. 다행히도 많은 최신 모바일 / 태블릿 브라우저가 더 멋진 미디어 쿼리를 지원합니다.

@media screen and (max-width:800px) { /* non-hover styles here */ }

따라서 "스크린"또는 "핸드 헬드"부분이 무시 되더라도 "최대 너비"가 트릭을 수행합니다. 화면이 800 픽셀보다 작은 것은 태블릿 또는 전화 여야하며 호버 효과를 사용하지 않아야한다고 가정 할 수 있습니다. 저해상도 장치에서 마우스를 사용하는 드문 사용자에게는 호버 효과가 나타나지 않지만 사이트는 그렇지 않을 것입니다.

미디어 쿼리에 대한 추가 정보? 이 온라인에 대한 많은 기사가 있습니다-여기 하나가 있습니다 : http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

호버 효과를 CSS에서 벗어나 JavaScript로 적용하면 마우스 이벤트에 구체적으로 바인딩 할 수 있으며 화면 크기를 기준으로 최악의 경우 "문제"가있는 화면 크기를 기반으로 가정 할 수 있습니다. 마우스를 사용하는 사용자는 호버 효과를 놓치게됩니다.

최근 프로젝트에 대해 다음 JS를 작성했습니다.이 프로젝트는 터치하면 안되는 호버 효과가있는 데스크탑 / 모바일 / 태블릿 사이트입니다.

mobileNoHoverState모듈 아래 가변 가진다 preventMouseover(초기 선언 false로 설정 됨), true사용자가 발사 될 때 touchstart요소에 이벤트를 $target.

preventMouseover그런 다음 이벤트가 false발생할 때마다 다시 설정 mouseover되므로 사용자가 터치 스크린과 마우스를 모두 사용하는 경우 사이트가 의도 한대로 작동 할 수 있습니다.

우리는 그것들이 내부에서 선언 된 순서로 인해 mouseover트리거되고 있음을 알고 touchstart있습니다 init.

var mobileNoHoverState = function() {

    var hoverClass = 'hover',
        $target = $(".foo"), 
        preventMouseover = false;

    function forTouchstart() {
        preventMouseover = true;
    }

    function forMouseover() {
        if (preventMouseover === false) {
            $(this).addClass(hoverClass);
        } else {
            preventMouseover = false;
        }
    }

    function forMouseout() {
        $(this).removeClass(hoverClass);
    }

    function init() {
        $target.on({
            touchstart  : forTouchstart,
            mouseover   : forMouseover,
            mouseout    : forMouseout
        });                
    }

    return {
        init: init
    };
}();

그런 다음 모듈은 다음 줄로 인스턴스화됩니다.

mobileNoHoverState.init();

내 솔루션은 호버 활성 CSS 클래스를 HTML 태그에 추가하고 : hover를 사용하여 모든 CSS 선택기의 시작 부분에서 사용하고 첫 번째 터치 스타트 이벤트에서 해당 클래스를 제거하는 것입니다.

http://codepen.io/Bnaya/pen/EoJlb

JS :

(function () {
    'use strict';

    if (!('addEventListener' in window)) {
        return;
    }

    var htmlElement = document.querySelector('html');

    function touchStart () {
        document.querySelector('html').classList.remove('hover-active');

        htmlElement.removeEventListener('touchstart', touchStart);
    }

    htmlElement.addEventListener('touchstart', touchStart);
}());

HTML :

<html class="hover-active">

CSS :

.hover-active .mybutton:hover {
    box-shadow: 1px 1px 1px #000;
}

css내 견해 전체에 무거운 자바 스크립트 솔루션을 뿌리는 것이 불쾌한 옵션처럼 보였기 때문에 나는 이것에 대한 순수한 해결책을 정말로 원했습니다 . 마지막으로 @ media.hover 쿼리에서 "기본 입력 메커니즘으로 사용자가 요소를 가리킬 수 있는지 여부"를 감지 할 수있었습니다. 이는 "호버링"이 입력 장치의 직접 기능보다 에뮬레이트 된 동작 인 터치 장치를 피합니다.

예를 들어 링크가 있으면

<a href="/" class="link">Home</a>

그런 다음 :hover장치가 쉽게 이것을 지원할 때만 안전하게 스타일을 지정할 수 있습니다 css.

@media (hover: hover) {
  .link:hover { /* hover styles */ }
}

대부분의 최신 브라우저는 상호 작용 미디어 기능 쿼리를 지원하지만 IE 및 Firefox와 같은 일부 인기있는 브라우저는 지원 하지 않습니다. 필자의 경우 데스크톱의 Chrome과 모바일의 Chrome 및 Safari 만 지원하기 때문에 제대로 작동합니다.

동일한 문제를 해결하기 위해 수행 한 것은 기능 감지 ( 이 코드 와 같은 것을 사용함)를 사용하여 onTouchMove가 정의되어 있는지 확인한 다음 CSS 클래스 "touchMode"를 본문에 추가하고 그렇지 않으면 " desktopMode "를 참조하십시오.

그런 다음 일부 스타일 효과는 터치 장치에만 적용되거나 데스크탑에만 적용됩니다. CSS 규칙 앞에 적절한 클래스가 추가됩니다.

.desktopMode .someClass:hover{ color: red }
.touchMode .mainDiv { width: 100%; margin: 0; /*etc.*/ }

편집 : 물론이 전략은 CSS에 몇 가지 추가 문자를 추가하므로 CSS 크기가 걱정되는 경우 touchMode 및 desktopMode 정의를 검색하여 다른 파일에 넣을 수 있으므로 각 장치에 대해 최적화 된 CSS를 제공 할 수 있습니다 유형; 또는 prod로 가기 전에 클래스 이름을 훨씬 짧은 것으로 변경할 수 있습니다.

jst는 비슷한 문제가 있었지만 미디어 쿼리와 간단한 CSS로 문제를 해결했습니다. 나는 여기서 몇 가지 규칙을 어 기고 있다고 확신하지만 그것은 나를 위해 일하고 있습니다.

나는 기본적으로 누군가가 만든 대규모 응용 프로그램을 가져 와서 반응시켜야했습니다. 그들은 jQueryUI를 사용하고 jQuery를 무단 변경하지 말라고 요청했기 때문에 CSS 만 사용하도록 제한되었습니다.

터치 스크린 모드에서 버튼 중 하나를 눌렀을 때 버튼 동작이 적용되기 전에 호버 효과가 1 초 동안 발생합니다. 내가 고친 방법은 다음과 같습니다.

@media only screen and (max-width:1024px) {

       #buttonOne{
            height: 44px;
        }


        #buttonOne:hover{
            display:none;
        }
}

내 프로젝트에서 우리는 https://www.npmjs.com/package/postcss-hover-prefix 및 https://modernizr.com/을 사용 하여이 문제를 해결했습니다. 먼저 출력 css 파일을로 처리합니다 postcss-hover-prefix. .no-touch모든 CSS hover규칙에 추가 됩니다.

const fs = require("fs");
const postcss = require("postcss");
const hoverPrfx = require("postcss-hover-prefix");

var css = fs.readFileSync(cssFileName, "utf8").toString();
postcss()
   .use(hoverPrfx("no-touch"))
   .process(css)
   .then((result) => {
      fs.writeFileSync(cssFileName, result);
   });

CSS

a.text-primary:hover {
  color: #62686d;
}

된다

.no-touch a.text-primary:hover {
  color: #62686d;
}

런타임에 다음 과 같이 태그에 ModernizrCSS 클래스를 자동으로 추가 html합니다.

<html class="wpfe-full-height js flexbox flexboxlegacy canvas canvastext webgl 
  no-touch 
  geolocation postmessage websqldatabase indexeddb hashchange
  history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage
  borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients
  cssreflections csstransforms csstransforms3d csstransitions fontface
  generatedcontent video audio localstorage sessionstorage webworkers
  applicationcache svg inlinesvg smil svgclippaths websocketsbinary">

css plus Modernizr의 이러한 사후 처리는 터치 장치에 대한 호버를 비활성화하고 다른 장치를 가능하게합니다. 사실이 접근법은 Bootstrap 4에서 영감을 얻었으며 동일한 문제를 해결하는 방법 : https://v4-alpha.getbootstrap.com/getting-started/browsers-devices/#sticky-hoverfocus-on-mobile

mouseLeave터치 스크린에서 요소를 터치 할 때마다 이벤트 를 트리거 할 수 있습니다 . 모든 <a>태그에 대한 솔루션은 다음과 같습니다 .

function removeHover() {
    var anchors = document.getElementsByTagName('a');
    for(i=0; i<anchors.length; i++) {
        anchors[i].addEventListener('touchstart', function(e){
            $('a').mouseleave();
        }, false);
    }
}

나는이 문제에 대한 2 가지 해결책을 찾았습니다.

이것은 좋지만 잘 지원 되지 않습니다 .

html.touch *:hover {
    all:unset!important;
}

그러나 이것은 매우 좋은 지원을합니다 .

html.touch *:hover {
    pointer-events: none !important;
}

나에게 완벽하게 작동하므로 버튼을 터치 할 때 모든 호버 효과가 켜져 있지만 마우스 이벤트의 초기 호버 효과로 버그가 발생하지는 않습니다.

~~노터치 장치에서 터치 감지 나는 modernizr이 최고의 작업을 수행했다고 생각합니다.~~

~~https://github.com/Modernizr/Modernizr/blob/master/feature-detects/touchevents.js~~

편집하다

이 문제에 대한 더 좋고 간단한 해결책을 찾았습니다.

클라이언트가 터치 장치인지 확인하는 방법

다소 이상한 문제처럼 들리면 CSS를 보는 것이 도움이 될 수 있습니다. 그러나 어쨌든, 그것이 일어나고 다른 모든 것이 좋으면 호버 효과를 자바 스크립트로 전환 할 수 있습니다 (jquery도 사용할 수 있습니다). 간단히 말해, 마우스 오버 또는 더 나은 마우스 입력 이벤트에 바인딩하고 이벤트가 발생할 때 요소를 밝게합니다.

마지막 예를 확인하십시오 : http://api.jquery.com/mouseover/ , 이벤트가 발생할 때 비슷한 것을 사용하여 이벤트를 가져올 수 있습니다!

JavaScript를 사용 하고 싶다면 페이지에서 Modernizr 을 사용할 수 있습니다 . 페이지가로드되면 비 터치 스크린 브라우저는 .tag 태그를 .tag 태그에 추가하지만, 터치 스크린 브라우저의 경우 html 태그는 .tag 클래스를 html 태그에 추가합니다 .

그런 다음 마우스 엔터와 마우스 리브 리스너를 추가하기로 결정하기 전에 html 태그에 터치가없는 클래스가 있는지 확인하는 경우입니다.

if($('html').hasClass('no-touch')){
    $('.box').on("mouseenter", function(event){
            $(this).css('background-color','#0000ff')
    });
    $('.box').on("mouseleave", function(event){
            $(this).css('background-color','')
    });
}

터치 스크린 장치의 경우 이벤트에 리스너가 없으므로 탭해도 호버 효과가 없습니다.

최근에 한 프로젝트에서 jQuery의 위임 된 이벤트 기능 으로이 문제를 해결했습니다. jQuery 선택기를 사용하여 특정 요소를 찾고 마우스가 요소 위에있을 때 해당 요소에 CSS 클래스를 추가 / 제거합니다. Windows 8을 실행하는 터치 가능 노트북의 IE10을 포함하여 테스트 할 수있는 한 제대로 작동하는 것 같습니다.

$(document).ready(
    function()
    {
        // insert your own selector here: maybe '.hoverable'?
        var selector = 'button, .hotspot';

        $('body')
            .on('mouseover', selector, function(){ $(this).addClass('mouseover');    })
            .on('mouseout',  selector, function(){ $(this).removeClass('mouseover'); })
            .on('click',     selector, function(){ $(this).removeClass('mouseover'); });
    }
);

편집 : 물론이 솔루션을 사용하려면 CSS를 변경하여 ": hover"선택기를 제거하고 "호버링"할 요소를 미리 고려하십시오.

If you have very many elements on your page (like several thousand) it may get a bit slow, though, because this solution catches events of three types on all elements in the page, and then does its thing if the selector matches. I named the CSS class "mouseover" instead of "hover", because I didn't want any CSS readers to read ":hover" where I wrote ".hover".

Here is my solution: http://jsfiddle.net/agamemnus/g56aw709/-- code below.

All one needs to do is to convert their ":hover" to ".hover"... that's it! The big difference between this and the rest is that this will also work on non-singular element selectors such as .my_class > *:hover {.

handle_css_hover_effects ()

function handle_css_hover_effects (init) {
 var init = init || {}
 var handle_touch_events = init.handle_touch_events || true
 var handle_mouse_events = init.handle_mouse_events || true
 var hover_class         = init.hover_class         || "hover"
 var delay_preferences   = init.delay_preferences   || {touch: {add: 500, remove: 500}}
 function default_handler (curobj, input_type, op) {
  var hovered_element_selector = "*" + ((op == "add") ? ":" : ("." + hover_class))
  var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll(hovered_element_selector))
  var modified_list = []
  while (true) {
   if ((curobj == null) || (curobj == document.documentElement)) break
   if (hovered_elements.indexOf(curobj) != -1) modified_list.push (curobj)
   curobj = curobj.parentNode
  }
  function do_hover_change () {modified_list.forEach (function (curobj) {curobj.classList[op](hover_class)})}
  if ((!delay_preferences[input_type]) || (!delay_preferences[input_type][op])) {
   do_hover_change ()
  } else {
   setTimeout (do_hover_change, delay_preferences[input_type][op])
  }
 }

 if (handle_mouse_events) {
  document.body.addEventListener ('mouseover' , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "add")})
  document.body.addEventListener ('mouseout'  , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
  document.body.addEventListener ('click'     , function (evt) {var curobj = evt.target; default_handler (curobj, "mouse", "remove")})
 }

 if (handle_touch_events) {
  document.body.addEventListener ('touchstart', function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "add")})
  document.body.addEventListener ('touchend'  , function (evt) {var curobj = evt.target; default_handler (curobj, "touch", "remove")})
  document.body.addEventListener ('touchmove',  function (evt) {
   var curobj = evt.target
   var hovered_elements = Array.prototype.slice.call(document.body.querySelectorAll("*:hover"))
   var lastobj = null
   evt = evt.changedTouches[0]
   var elements_at_point = get_elements_at_point (evt.pageX, evt.pageY)
   // Get the last element that isn't at the current point but is still hovered over, and remove only its hover attribute.
   while (true) {
    if ((curobj == null) || (curobj == document.documentElement)) break
    if ((hovered_elements.indexOf(curobj) != -1) && (elements_at_point.indexOf(curobj) == -1)) lastobj = curobj
    curobj = curobj.parentNode
   }
   if (lastobj == null) return
   if ((!delay_preferences.touch) || (!delay_preferences.touch.remove)) {
    lastobj.classList.remove(hover_class)
   } else {
    setTimeout (function () {lastobj.classList.remove(hover_class)}, delay_preferences.touch.remove)
   }

   function get_elements_at_point (x, y) {
    var el_list = [], pe_list = []
    while (true) {
     var curobj = document.elementFromPoint(x, y)
     if ((curobj == null) || (curobj == document.documentElement)) break
     el_list.push (curobj); pe_list.push (curobj.style.pointerEvents)
     curobj.style.pointerEvents = "none"
    }
    el_list.forEach (function (current_element, i) {current_element.style.pointerEvents = pe_list[i]})
    return el_list
   }
  })
 }
}

Include Modernizr on your page and set your hover states like this instead:

html.no-touchevents .box:hover {
    background: blue;
}

Hello person from the future, you probably want to use the pointer and/or hover media query. The handheld media query was deprecated.

/* device is using a mouse or similar */
@media (pointer: fine) {
  a:hover {
    background: red;
  }
}

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, if applicable, to avoid affecting tooltips
only tested on iphone XR ios 12.1.12, and ipad 3 ios 9.3.5, using Safari or Chrome.

References:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/

참고URL : https://stackoverflow.com/questions/8291517/disable-hover-effects-on-mobile-browsers

'program tip' 카테고리의 다른 글

한면을 제외한 모든면에 CSS3 상자 그림자 만들기 (0)	2020.07.29
모든 변수의 타입을 얻는다 (0)	2020.07.29
Lua 테이블이 비어 있는지 확인하는 가장 효율적인 방법 (항목이 없음)? (0)	2020.07.29
PDO MySQL : PDO :: ATTR_EMULATE_PREPARES를 사용합니까? (0)	2020.07.29
Xcode 경고를 제거하는 방법 Apple Mach-O Linker 경고 '포인터가 주소에 정렬되지 않았습니다 (0)	2020.07.29

현재글모바일 브라우저에서 호버 효과 비활성화

radiobox

모바일 브라우저에서 호버 효과 비활성화

모바일 브라우저에서 호버 효과 비활성화

배경

솔루션 설명

대체 솔루션

추가 자료

'program tip' 카테고리의 다른 글

'program tip'의 다른글

티스토리툴바

모바일 브라우저에서 호버 효과 비활성화

모바일 브라우저에서 호버 효과 비활성화

배경

솔루션 설명

대체 솔루션

추가 자료

'program tip' 카테고리의 다른 글

'program tip'의 다른글

관련글

티스토리툴바