在触摸设备上悬停事件 [英] hover event on touch device

问题描述

当鼠标悬停在< ul> 标记区域后，减少< ul> 的不透明度

的完全透明度

a href =http://stackoverflow.com/questions/17435158/image-change-opacity-on-hover-without-jquery>悬停时不使用jQuery的图片更改不透明

现在，问题出在平板电脑和手机上，因为在触摸设备上我们没有悬停事件，用户应该点击（触摸）< li> ，因此所有另一个< li> 将减少不透明度，用户不能取消选择（unhover）< li>

如何解决这个问题？

解决方案

在触摸设备上，不支持 hover 。您可以：

•在触摸设备样式表中跳过悬停效果

•使用JavaScript将鼠标悬停在点击互动中

•使用JavaScript在触摸设备上模拟悬停相互作用

在SO上有多个其他帖子讨论此问题：

如何我模拟了启用触摸功能的浏览器的悬停？

如何处理触摸设备上的悬停效果

悬停触摸设备

I decrease opacity of <ul> when mouse over the <ul> tag area and then set full opacity for <li> which user is on that.

like this sample: Image change opacity on hover without jQuery

now, the problem is in tablet and phones, because on touch devices we don't have hover event and user should click (touch) on <li> so all another <li> will decrease the opacity and user cannot unselect (unhover) that <li> so they should refresh the page.

How can I solve this problem?

解决方案

On touch devices, hover is not supported. You can either:

• skip hover effects in touch device stylesheets
• use JavaScript to turn hover into click interactions
• use JavaScript to simulate hover interactions on the touch device

There are multiple other posts on SO that discuss about this problem:

How do I simulate a hover with a touch in touch enabled browsers?
how to deal with hover effect on touch devices
Hover for Touch Devices

这篇关于在触摸设备上悬停事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！