Question

我使用mouseover / mouseout和data-src / data-hover用于在悬停时更改<img> src的图片链接

如何使代码适应触摸友好？是否有更简洁的方法来实现相同的功能？我已经尝试使用jQuery Mobile vmouseover，但它没有用。

我没有使用CSS :hover，因为它是一个特定的图形，必须在翻转时改变颜色，因此我不能将其作为起点。

每个链接的HTML设置：

<a href="/books">
  <img id="book" class="image image-3" data-hover="/assets/graphics/ro-book@2x.png" data-src="/assets/graphics/book@2x.png">
</a>

脚本：

$(".image-3").mouseover(function() {
  $(this).attr('src', $(this).data("hover"));
}).mouseout(function() {
  $(this).attr('src', $(this).data("src"));
});

Answer 1

不要忘记你应该使用触摸事件而不是移动设备的鼠标事件。

我建议使用touchstart事件。

$(".image-3").touchstart(function() {
  $(this).attr('src', $(this).data("hover"));
}).touchend(function() {
  $(this).attr('src', $(this).data("src"));
});

Answer 2

这终于奏效了，不知道语法改变做了什么，但我很满意。

$('.image-3').bind('touchstart touchend', function(e) {
    $(this).attr('src', $(this).data("hover"));
});

在鼠标悬停时调整img src更改为触摸屏设备

2 个答案: