使鼠标悬停时的img src更改适应于触摸屏设备

Question

我使用mouseover/mouseout和data-src/data-hover来显示图形链接，这些链接可以改变悬停状态下的<img> src。

我怎样才能使代码变得对触摸友好？有没有更干净/更简单的方法来实现同样的功能？我已经在jQuery手机上试用过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"));
});