如何根据不同的设备使用鼠标悬停和单击？

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可切换高度/宽度