如何使jQuery鼠標懸停效果在iOS中工作

Question

目前，我正在為在線計划工具設計時間欄的粗略原型。 人們應該能夠通過將鼠標懸停在時間欄上來指示其可用性：

9.00-10.00 | 10.00-11.00 | 等等

當您將鼠標懸停在某個時間段上時，它會變成綠色。

這在計算機上可以正常工作，但我也想使其在iPad上也可以工作。 我讀了這篇文章，但是當我涉及jQuery時，我還是一個初學者，所以我不明白如何在我的代碼中實現它：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table>
<tr>
  <td class="c1">9.00 - 10.00</td>
  <td class="c2">10.00 - 11.00</td>
  <td class="c3">etc.</td>
</tr>
</table>


<script>
$( ".c1" ).hover(function() {
    $('.c1').css('background', 'LawnGreen ');
});
$( ".c2" ).hover(function() {
    $('.c2').css('background', 'LawnGreen ');
});
$( ".c3" ).hover(function() {
    $('.c3').css('background', 'LawnGreen ');
});
</script>

<style>
table {border-collapse:collapse;}
table, th, td {border: 1px solid black; padding: 10px;}
</style>

我應該添加什么代碼才能在iPad上實現此功能？

編輯：

我目前正在測試Kirgan提出的解決方案。 我嘗試了一個非常基本的實現，以查看是否可以使插件正常工作：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.hammer.js"></script>

<script>
    var element = document.getElementById('test_el');
    var hammertime = Hammer(element).on("tap", function(event) {
        alert('hello!');
    });
</script>

<p id="test_el">Tap here</p>

<style>
#test_el {font-size: 100px; border: solid red;}
</style>

該代碼位於http://test.plantage82.nl

如果我在iPhone上打開它並點擊“在這里點擊”文本，我會收到警報，對嗎？ 不會發生，我犯錯了嗎？

Answer 1

根據您使用的jQuery版本：

$( ".c1" ).bind('hover click', function() {
    $(this).css('background', 'LawnGreen ');
});

再一次，您可以並且可能應該只使用CSS：

.c1:hover {
    background: LawnGreen;
}

編輯：如果該jQuery腳本不起作用，請嘗試以下操作：

$( ".c1" ).live('hover click', function() {
    $(this).css('background', 'LawnGreen ');
});

Answer 2

我不知道您想做什么，但在iOS上具有這種效果看起來很奇怪，也許可以將錘子js夾在移動動作中進行捏，拖動，觸摸等操作。http: //eightmedia.github.io/hammer .js /