Question

目前我正在研究一个时间栏的粗略原型，用于在线规划工具。人们应该能够通过将鼠标悬停在时间栏上来表明其可用性：

9.00-10.00 | 10.00-11.00 |等。

当您将鼠标悬停在某个时间段上时，它会变为绿色。

这在计算机上运行良好，但我也想在iPad上运行。我读了this article但是我是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上看起来很奇怪，也许看起来像是捏，移动，触摸等移动动作...... http://eightmedia.github.io/hammer.js/ < / p>

如何在iOS中使jQuery鼠标悬停效果工作

2 个答案: