css悬停在移动与css六角形工作有点儿童车

Question

在我的项目中，我有一个六边形网格（用CSS制作）。在桌面上，当它们悬停在桌面上时，它们会翻转（因此会改变颜色）。我想在我的智能手机上产生同样的效果。

我正在使用XAMPP在我的手机（iPhone 5）上进行测试。

我已经尝试过下面的代码（stackoverflow-link）但是这会在触摸移动设备上的六角形时产生一些奇怪的错误效果。当我从Safari将页面添加到主屏幕时，它的效果更好（仍然不完美）。

可在此处找到HTML和CSS： codepen

这就是我现在正在做的事情，但如上所述，这不能正常工作：

$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('hover_effect');
    });
});

这添加到我的CSS

element:hover, element.hover_effect {
    rule:properties;
}

我来自here