7

I have a web page with some css3 animation on hover and I would like to make it work on iPad (and any touch enabled device) when the user touch these elements.
Here's my code:

html: 

<div id="headBlock">
    <a id="arm"></a>
    <div id="head">
        <div id="blink"></div>
        <div id="lid"></div>
        <div id="man"></div>
        <a id="man-arm"></a>
    </div>
</div>

js: 

//arm
$('#arm').hover(function(){
    $(this).removeAttr('style').css('bottom','244px');
    $(this).addClass('hover_effect');

    }, function(){
        $(this).removeClass('hover_effect');
});

//man arm
$('#man').hover(function(){
    $('#man-arm').removeAttr('style');
    $('#man-arm').addClass('hover_effect');

    }, function(){
        $('#man-arm').removeClass('hover_effect');
});

You can see that when the mouse enter the elements I remove the style then apply a style and add the css class 'hover_effect' and when the mouse leaves I remove the 'hover_effect' class.
How can I achieve the same thing on touch devices? The click event doesn't have the a callback so I cannot remove the 'hover_effect' class after the click happens. I tried mousedown and mouseup but it didn't work. I searched stackoverflow and I found this How do I simulate a hover with a touch in touch enabled browsers? but it didn't have any effect.
Any idea anyone?

Thanks
Mauro

Community
  • 1
  • 1
Mauro74
  • 4,686
  • 15
  • 58
  • 80

2 Answers2

4

try this

$('#arm').bind('touchstart', function() {
        $(this).removeAttr('style').css('bottom','244px');
        $(this).addClass('hover_effect');
});

$('#arm').bind('touchend', function() {
        $(this).removeClass('hover_effect');
});

similarly for $('#man').

dku.rajkumar
  • 18,414
  • 7
  • 41
  • 58
-4

or you can add :hover class under css like a#man:hover{....} [same goes if you want the same effect or use diff. colors or image for the diff. results].

Sam Sussman
  • 1,005
  • 8
  • 27
ravi gupta
  • 7
  • 1