Preciso desativar um evento hover apenas nos celulares e tablets.

[FelipeSAMA 1]

Boa tarde meu povo! :)

Eu vos saúdo, e venho lhes perguntar algo sismples.

 

Tenho um script em jquery que serve para controlar os eventos do meu menu. Dentro deste script existem alguns eventos de click e HOVER, percebi o seguinte:

 

Programei especificamente um evento HOVER para os <li>, com intuito da sua respectiva imagem de fundo aparecer. Porém, nos tablets e celulares, toda vez que eu clicar em cima de algum <li>, o primeiro clique vai estar contando como HOVER, e não como CLICK. Desta forma, o cliente teria que clicar duas vezes no link para que fosse direcionado até a sessão específica.

 

E eu não quero isso :(

var header = 0;        

$( "header ul li" ).click(function() {
            header++;
            $( "header ul li" ).slideUp( 130 );
            if( (header%2) != 0 ) {
                $( "header" ).css({ "width" : "315px" });
                $( "header .menu" ).animate({
                    width: "325px"
                    }, 130, function() { $( "header .menu" ).css({ 'background' : '#ff5c26' }); });
            } else if ( (header%2) == 0 ) {
                $( "header" ).css({ "width" : "140px" });
                $( "header .menu" ).animate({
                    width: "140px"
                    }, 130, function() { $( "header .menu" ).css({ 'background' : '#031c2c' }); });
            }
        });

        /*
        $( "header ul li" ).hover(function() {
            $(this).children("img").css({ "display" : "block" });
        }, function() {            
            $(this).children("img").css({ "display" : "none" });
        });
        */

A parte comentada serve para aparecer a imagem de fundo do <li> caso passar o mouse por cima. O que eu quero fazer é apenas retirar essas duas linhas caso o dispositivo seja tablet ou celular..

 

 

Tem como???

Obrigado!!!!!!

[fabiomartins87 0]

Esta é uma pergunta difícil que geralmente não tem uma resposta perfeita:

Você poderia verificar se o browser que está usando não têm compatibilidade com eventos de toque.

if (typeof document.body.ontouchstart == "undefined") {
  $( "header ul li" ).hover(function() {
    $(this).children("img").css({ "display" : "block" });
  }, function() {            
    $(this).children("img").css({ "display" : "none" });
  });
}

[FelipeSAMA 1]

é uma boa idéia, vlw man!