在 jQueryMobile 中触摸后悬停效果保持不变

2022-01-22 00:00:00 hover javascript css jquery-mobile

我正在使用 jQueryMobile 在 phonegap 中开发应用程序，仅适用于移动设备.我在其中搜索图标.当用户触摸它时，我想在该图标上赋予悬停效果.

I'm developiong application in phonegap with jQueryMobile for mobile devices only. In which I've search icon. I want to give hover effect on that icon when user touchs it.

我已经通过 css 实现了这一点:

I've achived this by css:

<a href="search.html" class="custom_header" >

    .custom_header:hover {
        background:url('../images/effect_glow.png') no-repeat center;

现在的问题是这种悬停效果在触摸后仍然存在.我想要mousein和mouseout这样的行为.在这种情况下，即使那部分没有接触，效果也会保持不变.

Now the problem is this hover effect stays after touch. I want behaviour like mousein and mouseout. In this case effect stays even that part is not touching.

手指离开后如何消除悬停效果?

How to remove hover effect after finger get off on it?

推荐答案

您可能知道这一点，但 :hover 在触摸屏设备上不存在.因此，当您设计一个响应式网站时，您应该仔细计划何时何地使用 :hover 交互.

You maybe know this but :hover doesn’t exist on touch screen devices. So when you design a responsive website, you should carefully plan when and where to use :hover interactions.

虽然它是在移动设备上实现的，但它的漏洞非常多，主要是在 iOS 设备上.另一方面，您不能使用 :focus，因为它只能用于支持焦点的元素，因此排除了标签和按钮.:active 也不适用于移动设备.

While it is implemented on mobile devices it is extremely buggy, mostly on iOS devices. On the other end you cant use :focus because it can be used only on a elements that support focus so a tags and buttons are ruled out. Also :active is no go on mobile devices.

在这种情况下，我们可以使用 jQuery 来解决这个问题.

In this case we can use jQuery to remedy this problem.

工作示例:http://jsfiddle.net/Gajotres/84Nug/

在这个例子中，我使用了 vmousedown、vmouseup 和 vmousecancel 事件，所以我可以在桌面/移动设备上测试它.只需将它们替换为 touchstart、touchend 和 touchcancel>.

In this example I have used vmousedown, vmouseup and vmousecancel events so I can test it on desktop / mobile devices alike. Just replace them with touchstart, touchend and touchcancel.

touchcancel/vmousecancel 是必需的，因为有时按钮可以保持按下状态.

touchcancel / vmousecancel is needed because sometimes button can stay in pressed state.

代码:

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('touchstart','.custom_header' ,function(){
        $(".custom_header").css("background","url('http://www.cesarsway.com/sites/default/files/cesarsway-images/features/2012/March/Puppies-and-Exercise.jpg') no-repeat center");
    }).on('touchend', function(){
        $(".custom_header").css("background","red");
    }).on("touchcancel", function() {
        $(".custom_header").css("background","red");
     }); 
});

相关文章