Wykrywanie możliwości hover

Question

Pseudo-klasa: hover CSS nie działa dobrze na urządzeniach dotykowych. Stan unosu ma tendencję do utrzymywania się, dopóki coś innego nie zostanie dotknięte. Tak więc w naszych aplikacjach internetowych, używamy modernizr wykryć Przeglądarki/urządzeń z funkcją dotyku, a my wyłączyć stany unoszących się w tych przypadkach:

.no kontakcie .button:

staje Ta aktywowania {...} problem na urządzeniu hybrydowym obsługującym zarówno ekran dotykowy, jak i urządzenie wskazujące, takie jak mysz lub touchpad. Program Modernizr wykrywa, że ​​jest obsługiwany dotykiem i żaden z stanów aktywowania nie działa podczas korzystania z myszy.

Co jest bardziej przydatne, to wykrywanie obecności myszy lub innego wskaźnika zamiast ekranu dotykowego. Ale nie mogę znaleźć czegoś takiego.

Wszelkie sugestie?

Answer 1

Można spróbować jQueries .mouseover() .mouseenter() .mouseout() .mouseleave()

Nie jestem pewien, czy to odpowiedzi na swoje pytania, ale to jest inny sposób na dzieje się unosi i wykrywania kiedy "wskaźnik" wchodzi w coś. Możesz również użyć zapytań o media: umieść kursor w swoich css i, jak sądzę, wyłącz je. Lub zrób coś innego na określonej szerokości ekranu użytkownika. 800px to coś w rodzaju rozmiaru iPada. Poniżej znajduje się kod, mam nadzieję, że to zadziała!

$(document).ready(function(){ 
 
    $(".box").mouseover(function(){ 
 
    var duhbox = $(".box").addClass("black"); 
 
    duhbox.animate({borderRadius: "50px"}); 
 
    }); 
 
    $(".box").mouseout(function(){ 
 
    var goBack = $(".box").removeClass("black"); 
 
    goBack.animate({borderRadius: "0px"}); 
 
    }); 
 
});

.box{ 
 
    height: 150px; 
 
    width: 150px; 
 
    background-color: royalblue; 
 
    border: 1px solid black; 
 
} 
 

 
.black{ 
 
    background-color: black; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='box'></div>

jeśli to nie działa tak, jak tego chciał. Pomyślę o innych sposobach!

Answer 2

wiem, jest to stara sprawa, ale dla Googlersi lądowania tutaj, ta kwerenda mediów będzie wykonać zadanie:

@media not all and (hover: none) { 
    .hoverspecificstyles:hover { 
    display: block; 
    } 
} 

Zrobione z this answer