如何根據不同的設備使用鼠標懸停和單擊？

Question

我有一個菜單按鈕，該按鈕一半可見，一半在屏幕外。 完整按鈕只有在“懸停”時才可見（我為此編寫了CSS ，該按鈕水平移動，因此可以完整顯示）。 現在，它可以在桌面網站上使用。 但是如您所知，懸停在移動網站上不可用，因此懸停會轉換為點擊。 單擊使按鈕完全可見，但再次單擊時它不會再次隱藏，因為我們尚未定義要顯示和隱藏的click事件，因為它不會干擾懸停。

那么，有什么短而有效的方法可以做到這一點，以便將鼠標懸停在桌面上工作，而單擊在電話上工作以實現相同的（顯示和隱藏）功能？

您可以使用CSS或jQuery或同時使用兩者。

Answer 1

簡單嘗試一下

1-使用媒體查詢在移動設備上禁用懸停

@media屏幕和（最大寬度：767px）{

button：hover {只需使用}}禁用css ur}

2-添加此jQuery-此代碼在按鈕上單擊添加和刪除類

$（'button'）。click（function（）{$（this）.toggleClass（'btnClick'）;

}）;

3：現在為此類編寫相同的懸停CSS

.btnClick {

}

Answer 2

對於您的情況，建議您在適合台式機的斷點內設置hover function ，並在適合移動設備的斷點內設置click function 。 請參閱下面的示例，並根據需要進行調整。

 $(document).ready(function() { // When document is ready check window width, then choose hover/click if ($(window).width() > 768) { $("div").hover(function() { $(this).toggleClass("increase"); }); } else { $("div").click(function() { $(this).toggleClass("increase"); }); } }); 

 div { width: 50px; height: 15px; line-height: 45px; margin: 0 auto; background: red; color: white; border-radius: 5px; text-align: center; cursor: pointer; overflow: hidden; transition: all 1s; } div.increase { width: 150px; height: 45px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> I am the Button</div> 

注意：在我的示例中； 當設備寬度小於768px時， hover可切換高度/寬度，而當設備寬度小於768px時， click可切換高度/寬度