檢測懸停能力

懸停CSS僞類在觸摸設備上無法正常工作。懸停狀態往往會持續下去，直到其他東西被觸摸。因此，在我們的web應用程序，我們使用Modernizr的檢測瀏覽器/設備帶觸摸功能，我們在這種情況下禁用懸停狀態：檢測懸停能力

。沒有觸摸.button：懸停{...}

這成爲在支持觸摸屏和指針設備（例如鼠標或觸摸板）的混合設備上的問題。 Modernizr檢測到它啓用了觸摸功能，並且使用鼠標時懸浮狀態均不起作用。

更有用的是檢測鼠標或其他指針設備，而不是觸摸屏的存在。但我無法找到像這樣的東西。

有什麼建議嗎？

來源

2015-09-16 elmonty

兩者甚至不必是混合設備。 android支持鼠標和USB otg，因此您可以輕鬆地將常規鼠標連接到手機/平板電腦，並且您將獲得功能齊全的鼠標指針。 –

這不是問題。我問如何檢測瀏覽器/設備是否有鼠標指針，所以我可以啓用：懸停僞類。 – elmonty

非常好，簡單的問題，它似乎（也對我）沒有真正令人滿意的答案。無論如何，我也使用Modernizr，因爲這似乎是一個不行，因爲混合設備用戶可以自由決定將任何時間從使用其中一個切換到另一個。 – Garavani

-1

您可以嘗試jQueries .mouseover（）.mouseenter（）.mouseout（）.mouseleave（）

林不知道如果這回答你的問題，但是這是要去約懸停和檢測時，以不同的方式「指針」進入某物。你也可以在你的CSS中使用媒體查詢：懸停在你的CSS中，我想，把它關掉。或者在用戶屏幕尺寸的某個寬度上進行其他操作。 800px是像一個iPad的大小。下面是一些代碼，我真的希望這個作品！

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

如果像你想它，這並不工作。我想到其他方法！

來源

2015-09-16 19:53:41

我知道如何應對懸停。我想知道的是如何檢測瀏覽器/設備是否能夠顯示鼠標指針，因此可以正確懸停（例如，不是粘滯懸停）。 – elmonty

我知道這是一個老問題，但對於這裏登陸的Google，這個媒體查詢將做的工作：

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

從this answer

來源

2017-09-26 20:31:20

檢測懸停能力

回答

相關問題