0

In my project, I have a grid of hexagons (made with CSS). On the desktop they flip (and therefore change color) when hovering over them. I want the same effect on my smartphone.

I'm using XAMPP to test on my mobile (iPhone 5).

I have tried the code below (stackoverflow-link) but this makes some strange buggy effects when touching the hexes on mobile. It works better (still not perfect) when I add the page to my homescreen from Safari.

The HTML and CSS can be found here: codepen

This is what I am doing at the moment but that does not work properly as mentioned above:

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

and this added to my CSS

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

which I have from here

Community
  • 1
  • 1
Julian Orth
  • 320
  • 1
  • 11
  • Can you please me more specific with what you mean by "buggy"? – TylerH Mar 26 '15 at 16:00
  • when i touch a hex from the grid, hexas around this begin to flash and blink strange, its hard to describe. after the touch they do change color like i wanted but not with that smooth animation – Julian Orth Mar 26 '15 at 17:47

0 Answers0