0

I have a nav that opens on hover.

I wish to make this work with touch devices.

SASS:

.menu{
    &:hover, .hover{
         top: 300px;
    }
}

JQUERY:

$('.menu').on('touchstart', function(e) {
        e.preventDefault();
        if ($(this).hasClass('hover')) {
            $(this).removeClass('hover');
        } else {
            $(this).addClass('hover');
            $('.menu').not(this).removeClass('hover');
        }
    });

So the above should, on touch, add a hover class to the menu class if it does not have one, and remove all other hover classes. If it does have a hover class, I then wish to remove it.

The code works apart from, removing the hover class if it already has a hover class.

I suspect this is due to the phone interpreting the :hover.

How can I prevent touch devices from interpreting the :hover?

Im not using jquery mobile.

panthro
  • 22,779
  • 66
  • 183
  • 324
  • possible duplicate of [Hover effect stays after touch in jQueryMobile](http://stackoverflow.com/questions/16814280/hover-effect-stays-after-touch-in-jquerymobile) – Matthew Jun 26 '15 at 15:04
  • Please read this [stackoverflow](http://stackoverflow.com/a/16815495/861778) answer about replacing :hover with other methods on touch devices using jQuery mobile. – Matthew Jun 26 '15 at 15:05
  • Im not using jquery mobile – panthro Jun 26 '15 at 15:08
  • 1
    Proofread your English before posting and make sure to read that post. It still applies because you are using a touch device. – Matthew Jun 26 '15 at 15:09

0 Answers0