Hover-Funktion erkennen

Question

Die Pseudo-Klasse: hover CSS funktioniert auf Touch-Geräten nicht gut. Der Schwebezustand hält an, bis etwas anderes berührt wird. So in unseren Web-Anwendungen verwenden wir Modernizr mit Touch-Fähigkeit Browser/Geräte zu erkennen und deaktivieren wir schweben Staaten in diesen Fällen:

.no-touch .Taste: Hover {...}

Dies wird ein Problem bei einem Hybridgerät, das sowohl einen Touchscreen als auch eine Zeigervorrichtung wie eine Maus oder ein Touchpad unterstützt. Modernizr erkennt, dass es berührungsaktiviert ist und keiner der Hover-Zustände funktioniert, wenn die Maus verwendet wird.

Was nützlicher wäre, ist das Vorhandensein der Maus oder eines anderen Zeigegeräts anstelle des Touchscreens zu erkennen. Aber ich finde nichts dergleichen.

Irgendwelche Vorschläge?

Answer 1

können Sie jQueries versuchen .mouseover() .mouseenter() .mouseout() .mouseleave()

Ich bin nicht sicher, ob dies Ihre Frage beantwortet, aber das ist eine andere Art und Weise über schwebt auf dem Gehen und Erkennen, wann ein "Zeiger" tritt über etwas ein. Sie können auch Media-Abfragen für Ihre: Mauszeiger in Ihrem CSS, und ich denke, schalten Sie sie aus. Oder machen Sie etwas anderes bei einer bestimmten Breite der Bildschirmgröße des Benutzers. 800px ist so etwas wie eine iPad-Größe. Unten ist ein Code, ich hoffe wirklich, das funktioniert!

$(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>

wenn diese, wie Sie es wollte nicht funktioniert. Ich denke an andere Wege!

Answer 2

Ich weiß, dass dies eine alte Frage, aber für Googler hier landen, diese Medienabfrage wird die Arbeit machen:

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

Entnommen this answer