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

Question

我正在使用 jQueryMobile 在 phonegap 中开发仅适用于移动设备的应用程序。在其中我有搜索图标。我想在用户触摸该图标时为其提供悬停效果。

我已经通过 css 实现了这个:

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

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

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

手指离开后如何去除悬停效果？

Answer 1

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

虽然它是在移动设备上实现的，但它有很多错误，主要是在 iOS 设备上。另一方面，您不能使用 :focus 因为它只能用于支持焦点的元素，因此排除了标签和按钮。另外 :active 在移动设备上是不行的。

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

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

在此示例中，我使用了 vmousedown、vmouseup 和 vmousecancel 事件，这样我就可以在类似的桌面/移动设备上对其进行测试。只需将它们替换为 touchstart、touchend 和 touchcancel>.

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

代码:

$(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");
     }); 
});