ce n'est pas tout à fait clair ce que votre question Est, mais si vous voulez juste éliminer le double clic, tout en conservant l'effet de hover pour la souris, mon conseil est de:

• Ajouter des effets de survol sur touchstart et mouseenter .
• supprimer les effets de stationnaire sur mouseleave , touchmove et click .

arrière-plan

afin de simuler une souris, navigateurs tels que Webkit mobile fire les événements suivants si un utilisateur touche et libère un doigt sur l'écran tactile (comme iPad) (source: toucher et la souris sur html5rocks.com):

1. touchstart
2. touchmove
3. touchend
4. 300ms delay, où le navigateur s'assure qu'il s'agit d'un simple clic, pas d'un double clic
5. mouseover
6. mouseenter
   • Note : si un événement mouseover , mouseenter ou mousemove modifie le contenu de la page, les événements suivants ne sont jamais déclenchés.
7. mousemove
8. mousedown
9. mouseup
10. click

Il ne semble pas possible tout simplement de dire la webbrowser à ignorer les événements de souris.

qu'est - ce qui est pire, si un événement mouseover modifie le contenu de la page, l'événement click n'est jamais déclenché, comme expliqué sur Safari Web Content Guide-Handling Events , en particulier la figure 6.4 dans One-Finger Events . Ce qu'est exactement un "changement de contenu", dépendra du navigateur et version. J'ai trouvé que pour iOS 7.0, un changement de couleur de fond n'est pas (ou plus?) une modification du contenu.

Solution Expliquée

à récapituler:

• Ajouter des effets de survol sur touchstart et mouseenter .
• Supprimer les effets de survol sur mouseleave , touchmove et click .

notez qu'il n'y a aucune action sur touchend !

cela fonctionne clairement pour les événements de souris: mouseenter et mouseleave (versions légèrement améliorées de mouseover et mouseout ) sont tirés, et ajouter et supprimer le vol stationnaire.

si l'Utilisateur a effectivement un lien click s, l'effet de vol stationnaire est également supprimé. Ceci s'assurer qu'elle est supprimée si l'utilisateur appuie sur le bouton retour dans le navigateur web.

cela fonctionne aussi pour les événements tactiles: sur touchstart l'effet de vol stationnaire est ajouté. Il est ""non" " enlevé sur touchend . Il est ajouté à nouveau sur mouseenter , et puisque cela ne modifie pas le contenu (il a déjà été ajouté), l'événement click est également activé, et le lien est suivi sans que l'utilisateur n'ait besoin de cliquer à nouveau!

le délai de 300ms qu'un navigateur a entre un événement touchstart et click est en fait mis en bonne utilisation parce que l'effet de vol stationnaire sera affiché pendant ce court laps de temps.

si l'utilisateur décide pour annuler le clic, déplacez le doigt ne suffit donc comme d'habitude. Normalement, il s'agit d'un problème puisqu'aucun événement mouseleave n'est déclenché et que l'effet de vol stationnaire demeure en place. Heureusement, cela peut facilement être corrigé en supprimant l'effet de vol stationnaire sur touchmove .

C'est ça!

notez qu'il est possible de supprimer le délai de 300ms, par exemple en utilisant la FastClick library , mais ceci est hors de portée pour cette question.

Solutions Alternatives

j'ai trouvé les problèmes suivants avec les alternatives suivantes:

• détection de navigateur: extrêmement sujet à des erreurs. Suppose qu'un dispositif a la souris ou le toucher, tandis qu'une combinaison des deux deviendra de plus en plus commune quand les écrans de toucher prolifèrent.
• CSS détection de médias: La seule CSS-seule solution que je connaisse. Toujours sujet aux erreurs, et suppose toujours qu'un périphérique a la souris ou le toucher, alors que les deux sont possibles.
• émule l'événement de clic dans touchend : cela suivra incorrectement le lien, même si l'utilisateur voulait seulement faire défiler ou zoom, sans l'intention de réellement cliquer le lien.
• utilisez une variable pour supprimer les événements de la souris: cet ensemble d'une variable dans touchend qui est utilisé comme condition if-dans les événements de souris suivants pour empêcher les changements d'État à ce moment-là. La variable est réinitialisée dans l'événement click. C'est une bonne solution si vous ne voulez vraiment pas d'effet de vol stationnaire sur les interfaces tactiles. Malheureusement, cela ne fonctionne pas si un touchend est déclenché pour une autre raison et qu'aucun événement de clic n'est déclenché (par exemple, l'Utilisateur a fait défiler ou zoomé), et essaie ensuite de suivre le lien avec une souris (I. e sur un appareil avec à la fois la souris et le toucher interface.)

Lire La Suite

• http://jsfiddle.net/macfreek/24Z5M / . Testez la solution ci-dessus pour vous-même dans ce bac à sable.
• http://www.macfreek.nl/memory/Touch_and_mouse_with_hover_effects_in_a_web_browser . Cette même réponse, avec un peu plus de fond.
• http://www.html5rocks.com/en/mobile/touchandmouse / . Grand article de fond sur html5rocks.com sur le toucher et la souris en général.
• https://developer.apple.com/library/ios/DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html . Web Safari Contenu Du Guide De Gestion D'Événements. Voir en particulier la figure 6.4, qui explique qu'aucun autre événement n'est déclenché après un changement de contenu au cours d'une Événement mouseover ou mousemove .

Voir aussi iPad/iPhone double-cliquez problème et Désactiver les effets de survol sur les navigateurs mobiles .

semble qu'il y ait une solution CSS après tout. La raison pour laquelle Safari attend une seconde touche est à cause de l'image de fond (ou des éléments) que vous assignez habituellement lors de l'événement :hover. Si il n'y a pas d'être montré - vous n'aurez pas de problèmes. La solution est de cibler la plate-forme iOS avec le fichier CSS secondaire (ou le style dans le cas d'une approche JS) qui l'emporte :passez l'arrière-plan pour hériter par exemple et garder cachés les éléments que vous alliez afficher à la souris:

voici un exemple CSS et HTML - un bloc produit avec une étiquette étoilée sur la souris:

HTML:

<a href="#" class="s"><span class="s-star"></span>Some text here</a>

CSS:

.s {
   background: url(some-image.png) no-repeat 0 0;

}
.s:hover {
   background: url(some-image-r.png) no-repeat 0 0;
}

.s-star {
   background: url(star.png) no-repeat 0 0;
   height: 56px;
   position: absolute;
   width: 72px;
   display:none;
}

.s:hover .s-star {
   display:block;
}

Solution (CSS secondaire):

/* CSS */
/* Keep hovers the same or hidden */
.s:hover {
   background:inherit;
}
.s:hover .s-star {
   display:none;
}

ce qui a fonctionné pour moi est ce que d'autres ici ont déjà dit:

Ne pas afficher/masquer les éléments sur le vol stationnaire ou mousemove (ce qui est le cas dans mon cas).

voici ce que dit Apple ( https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html ):

un élément cliquable est un lien, un élément de forme, une image map zone, ou de tout autre élément avec mousemove, mousedown, mouseup, ou onclick gestionnaires

si l'utilisateur tape un élément cliquable, les événements arrivent dans cet ordre: mouseover, mousemove, mousedown, mouseup, et cliquez. Aussi, si le contenu de la page change sur l'événement mousemove, aucun événement subséquent dans la séquence n'est envoyé. Ce comportement permet à l'utilisateur de taper dans le nouveau contenu.

Donc, vous pourriez utiliser la solution de @woop: détecter l'agent utilisateur, vérifier s'il s'agit d'un dispositif iOS et puis lier l'événement. J'ai fini par utiliser cette technique parce qu'elle convient à mes besoins et qu'il est plus logique de ne pas lier les événements de vol stationnaire lorsque vous ne le voulez pas.

mais... si vous ne voulez pas déconner avec les agents utilisateurs et toujours cacher/afficher des éléments sur hover/ mousemove, j'ai découvert que vous pouvez le faire en utilisant javascript natif, comme ceci:

$("body").on("mouseover", function() {
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
});

cela fonctionnera sur la version de bureau et rien ne sera fait sur la version mobile.

Et pour un peu plus de compatibilité...

$("body").on("mouseover", function() {
   if (document.getElementsByTagName && document.querySelector) { // check compatibility
       document.getElementsByTagName("my-class")[0].style.display = 'block'; //show element
       document.querySelector(".my-selector div").style.display = 'none'; // hide element
    } else {
        $(".my-class").show();
        $(".my-selector div").hide();
    }
});

la solution de cduruk a été très efficace, mais a causé des problèmes sur quelques parties de mon site. Comme j'utilisais déjà jQuery pour ajouter la classe hover css, la solution la plus simple était simplement de ne pas ajouter la classe hover css sur les appareils mobiles (ou plus précisément, de ne l'ajouter que LORSQU'il N'était pas sur un appareil mobile).

Voici l'idée générale:

var device = navigator.userAgent.toLowerCase();
var ios = device.match(/(iphone|ipod|ipad)/);

if (!(ios)) {
    $(".portfolio-style").hover(
        function(){
            $(this).stop().animate({opacity: 1}, 100);
            $(this).addClass("portfolio-red-text");
        },
        function(){
            $(this).stop().animate({opacity: 0.85}, 100);
            $(this).removeClass("portfolio-red-text");
        }
    );
}

* code réduit à titre indicatif

je pense qu'il serait sage d'essayer mouseenter à la place de mouseover . C'est ce qui est utilisé à l'interne lors de la fixation à .hover(fn,fn) et est généralement ce que vous voulez.

j'ai eu les problèmes suivants avec les solutions existantes, et trouvé quelque chose qui semble résoudre tous d'entre eux. Cela suppose que vous visez quelque chose de cross browser, cross device, et que vous ne voulez pas que l'appareil renifle.

Les problèmes qu'il en résout

utilisant juste touchstart ou touchend :

• les Causes de l'événement qui se déclenche quand les gens sont en essayant de faire défiler le passé le contenu et il se trouve qu'ils ont le doigt sur cet élément quand ils ont commencé à glisser - déclenchant l'action de façon inattendue.
• peut déclencher l'événement sur longpress , similaire au clic droit sur le bureau. Par exemple, si votre événement de clic va à URL X, et l'utilisateur longresses pour ouvrir X dans un nouvel onglet, l'Utilisateur sera confus pour trouver x ouvert dans les deux onglets. Sur certains navigateurs (par exemple iPhone), il peut même empêcher le long menu de presse d'apparaître.

déclenchement mouseover événements sur touchstart et mouseout sur touchmove a des conséquences moins graves, mais interfère avec le comportement habituel du navigateur, par exemple:

• une longue presse déclencherait une mouseover qui ne finit jamais.
• de nombreux navigateurs Android traitent l'emplacement du doigt sur touchstart comme un mouseover , qui est mouseout ed sur le prochain touchstart . Une façon de voir le contenu de mouseover dans Android est donc de toucher la zone d'intérêt et remuer le doigt, en faisant défiler la page légèrement. Traiter touchmove comme mouseout brise cela.

la solution

en théorie, vous pouvez juste ajouter un drapeau avec touchmove , mais les iPhones déclenchent touchmove même s'il n'y a pas de mouvement. En théorie, il suffit de comparer le touchstart et touchend événement pageX et pageY mais sur les iPhones, il n'y a pas de touchend pageX ou pageY .

donc malheureusement pour couvrir toutes les bases il ne finit par un peu plus compliqué.

$el.on('touchstart', function(e){
    $el.data('tstartE', e);
    if(event.originalEvent.targetTouches){
        // store values, not reference, since touch obj will change
        var touch = e.originalEvent.targetTouches[0];
        $el.data('tstartT',{ clientX: touch.clientX, clientY: touch.clientY } );
    }
});
$el.on('touchmove', function(e){
    if(event.originalEvent.targetTouches){
        $el.data('tstartM', event.originalEvent.targetTouches[0]);
    }
});

$el.on('click touchend', function(e){
    var oldE = $el.data('tstartE');
    if( oldE && oldE.timeStamp + 1000 < e.timeStamp ) {
        $el.data('tstartE',false);
        return;
    }
    if( $el.data('iosTouchM') && $el.data('tstartT') ){
        var start = $el.data('tstartT'), end = $el.data('tstartM');
        if( start.clientX != end.clientX || start.clientY != end.clientY ){
            $el.data('tstartT', false);
            $el.data('tstartM', false);
            $el.data('tstartE',false);
            return;
        }
    }
    $el.data('tstartE',false);

en théorie, il y a des façons d'obtenir le temps exact utilisé pour une typographie longue au lieu de simplement utiliser 1000 comme approximation, mais en pratique ce n'est pas aussi simple et il est préférable d'utiliser un proxy raisonnable .

la réponse de MacFreak m'a été extrêmement utile. Voici du code au cas où ça vous aiderait.

problème - appliquer toucher signifie Chaque fois que vous faites défiler votre doigt sur un élément, il répond comme si vous l'aviez pressé, même si vous essayiez juste de faire défiler.

je crée un effet avec jQuery qui fane Une ligne sous quelques boutons pour" mettre en valeur " le bouton en vol stationnaire. Je ne voulez pas que cela signifie que vous devez appuyer sur le bouton deux fois sur les appareils tactiles pour suivre le lien.

Voici les boutons:

<a class="menu_button" href="#">
    <div class="menu_underline"></div>
</a>

je veux que la div" menu_underline " disparaisse sur mouseover et disparaisse sur mouseout. Mais je veux que touch devices puisse suivre le lien En un seul clic, pas deux.

SOLUTION - voici le jQuery pour le faire fonctionner:

//Mouse Enter
$('.menu_button').bind('touchstart mouseenter', function(){
    $(this).find(".menu_underline").fadeIn();
});

//Mouse Out   
$('.menu_button').bind('mouseleave touchmove click', function(){
    $(this).find(".menu_underline").fadeOut();
});

Beaucoup de merci pour votre aide sur ce MacFreak.

je viens de découvrir que cela fonctionne si vous ajoutez un auditeur vide, ne me demandez pas pourquoi, mais je l'ai testé sur iPhone et iPad avec iOS 9.3.2 et ça a bien fonctionné.

if(/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream){
    var elements = document.getElementsByTagName('a');
    for(var i = 0; i < elements.length; i++){
        elements[i].addEventListener('touchend',function(){});
    }
}

pas besoin de faire trop compliqué.

$('a').on('touchend', function() {
    $(this).click();
});

je "pense" que vos liens n'ont pas d'événement onmouseover, où 1 tap active onmouseover et le double tap active le lien. mais idk. Je n'ai pas d'iPad. Je pense que tu dois utiliser geste/événements tactiles.

https://developer.apple.com/documentation/webkitjs

j'ai eu le même problème, mais pas sur un périphérique tactile. L'événement déclenche à chaque fois que vous cliquez sur. Il y a quelque chose à propos de la file d'attente.

cependant, ma solution était comme ceci: Sur l'événement de clic (ou de toucher? vous avez mis un minuteur. Si le lien est cliqué à nouveau dans X ms, vous retournez simplement false.

pour régler la minuterie par élément, vous pouvez utiliser $.data() .

cela peut aussi corriger le problème @Ferdy décrit ci-dessus.

si vous utilisez Modernizr, il est très facile d'utiliser Modernizr.touch comme mentionné plus haut.

cependant, je préfère utiliser une combinaison de Modernizr.test de contact et d'agent utilisateur, juste pour être sûr.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

function Tipsy(element, options) {
    this.$element = $(element);
    this.options = options;
    this.enabled = !isTouchDevice;
    this.fixTitle();
};

si vous n'utilisez pas Modernizr, vous pouvez simplement remplacer la fonction Modernizr.touch ci-dessus par ('ontouchstart' in document.documentElement)

notez aussi que tester l'agent utilisateur iemobile vous donnera une plus large gamme de Microsoft mobile détecté appareils que Windows Phone.

vous pouvez utiliser click touchend ,

exemple:

$('a').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

ci-dessus affectera tous les liens sur les dispositifs tactiles.

si vous voulez cibler seulement des liens spécifiques, vous pouvez le faire en mettant une classe sur eux, i.e.:

HTML:

<a href="example.html" class="prevent-extra-click">Prevent extra click on touch device</a>

Jquery:

$('a.prevent-extra-click').on('click touchend', function() {
    var linkToAffect = $(this);
    var linkToAffectHref = linkToAffect.attr('href');
    window.location = linkToAffectHref;
});

Santé,

Jeroen

j'ai couru dans une situation similaire où j'ai eu des événements liés aux États mouseenter/mouseleave/click d'un élément, mais sur un iPhone, l'Utilisateur a dû double-cliquer l'élément pour déclencher d'abord l'événement mouseenter, puis de nouveau pour lancer l'événement click.

j'ai résolu cela en utilisant une méthode semblable comme ci-dessus, mais j'ai fait usage du jquery $.plugin de navigateur (pour jQuery 1.9>) et ajouté un .événement déclencheur de l'événement liant mouseenter, comme suit:

// mouseenter event
$('.element').on( "mouseenter", function() {
    // insert mouseenter events below

    // double click fix for iOS and mouseenter events
    if ($.browser.iphone || $.browser.ipad) $(this).trigger('click');
});
// mouseleave event
$('.element').on( "mouseleave", function() { 
    // insert mouseout events below
});
// onclick event
$('.element').on( "click", function() {
    // insert click events below
});

The .trigger empêche la nécessité de double-cliquer l'élément en tirant sur le .cliquez sur le gestionnaire d'événements sur mouseenter (ou le clic initial) de l'élément lorsqu'il est vu sur les iPhones ou les iPads. Peut-être pas la solution la plus élégante, mais elle fonctionne très bien dans mon cas et utilise un plugin que j'avais déjà en place, et m'a demandé d'ajouter une seule ligne de code pour faire fonctionner Mes événements existants sous ces appareils.

vous pouvez obtenir le jQuery $.plugin de navigateur ici: https://github.com/gabceb/jquery-browser-plugin

Juste une amélioration pour éviter la redirection lorsque vous faites glisser votre doigt sur un lien par erreur.

// tablet "one touch (click)" X "hover" > link redirection
$('a').on('touchmove touchend', function(e) {

    // if touchmove>touchend, set the data() for this element to true. then leave touchmove & let touchend fail(data=true) redirection
    if (e.type == 'touchmove') {
        $.data(this, "touchmove_cancel_redirection", true );
        return;
    }

    // if it's a simple touchend, data() for this element doesn't exist.
    if (e.type == 'touchend' && !$.data(this, "touchmove_cancel_redirection")) {
        var el = $(this);
        var link = el.attr('href');
        window.location = link;
    }

    // if touchmove>touchend, to be redirected on a future simple touchend for this element
    $.data(this, "touchmove_cancel_redirection", false );
});

avec l'inspiration de MacFreak, j'ai assemblé quelque chose qui fonctionne pour moi.

cette méthode js empêche le hover de coller sur un ipad, et empêche l'enregistrement du clic en deux clics dans certains cas. Dans CSS, si vous avez des classes hover psudo dans votre css, changez-les en .le vol stationnaire, par exemple .quelques-classe:hover .certains de la classe.hover

tester ce code sur un ipad pour voir comment la méthode CSS et JS en vol stationnaire se comportent différemment (en vol stationnaire seulement). Le bouton CSS n'a pas d'alerte de clic de fantaisie. http://jsfiddle.net/bensontrent/ctgr6stm /

function clicker(id, doStuff) {
  id.on('touchstart', function(e) {
    id.addClass('hover');
  }).on('touchmove', function(e) {
    id.removeClass('hover');
  }).mouseenter(function(e) {
    id.addClass('hover');
  }).mouseleave(function(e) {
    id.removeClass('hover');
  }).click(function(e) {
    id.removeClass('hover');
    //It's clicked. Do Something
    doStuff(id);
  });
}

function doStuff(id) {
  //Do Stuff
  $('#clicked-alert').fadeIn(function() {
    $(this).fadeOut();
  });
}
clicker($('#unique-id'), doStuff);

button {
  display: block;
  margin: 20px;
  padding: 10px;
  -webkit-appearance: none;
  touch-action: manipulation;
}
.hover {
  background: yellow;
}
.btn:active {
  background: red;
}
.cssonly:hover {
  background: yellow;
}
.cssonly:active {
  background: red;
}
#clicked-alert {
  display: none;
}

<button id="unique-id" class="btn">JS Hover for Mobile devices<span id="clicked-alert"> Clicked</span>

</button>
<button class="cssonly">CSS Only Button</button>
<br>This js method prevents hover from sticking on an ipad, and prevents the click registering as two clicks. In CSS, if you have any :hover in your css, change them to .hover For example .some-class:hover to .some-class.hover

pour faire fonctionner les liens sans casser le défilement tactile, j'ai résolu cela avec l'événement "tap" de jQuery Mobile:

    $('a').not('nav.navbar a').on("tap", function () {
        var link = $(this).attr('href');
        if (typeof link !== 'undefined') {
            window.location = link;
        }
    });

je suis en retard, je sais mais c'est l'une des solutions les plus faciles que j'ai trouvé:

    $('body').on('touchstart','*',function(){   //listen to touch
        var jQueryElement=$(this);  
        var element = jQueryElement.get(0); // find tapped HTML element
        if(!element.click){
            var eventObj = document.createEvent('MouseEvents');
            eventObj.initEvent('click',true,true);
            element.dispatchEvent(eventObj);
        }
    });

cela ne fonctionne pas seulement pour les liens(balises d'ancrage), mais aussi pour d'autres éléments. Espérons que cette aide.

ce court extrait semble fonctionner. Déclenchez l'événement de clic lorsque le lien est pointé:

  $('a').on('touchstart', function() {
    $(this).trigger('click');
  });

aucune de l'autre réponse ne fonctionne pour moi. Mon application a beaucoup d'écouteurs d'événements, propres cases à cocher et des liens qui a écouteur et des liens sans écouteur.

j'utilise ceci:

var selector = "label, a, button";
var timer;
var startX;
var startY;
$(document).on("click", selector, function (e) {
    if ($(this).data("touched") === true) {
        e.stopImmediatePropagation();
        return false;
    }
    return;
}).on("touchend", selector, function (e) {
    if (Math.abs(startX - e.originalEvent.changedTouches[0].screenX) > 10 || Math.abs(startY - e.originalEvent.changedTouches[0].screenY) > 10)
        // user action is not a tap
        return;
    var $this = $(this);
    // Visit: /q/can-i-call-jquery-click-to-follow-an-link-if-i-haven-t-bound-an-event-handler-to-it-with-bind-or-click-already-34532/"touched", true);
    if (timer)
        clearTimeout(timer);
    setTimeout(function () {
        $this.data("touched", false);
    }, 400);
    e.stopImmediatePropagation();
    return false;
}).on("touchstart", function (e) {
    startX = e.originalEvent.changedTouches[0].screenX;
    startY = e.originalEvent.changedTouches[0].screenY;
});

vous pouvez cocher navigator.userAgent comme ceci:

if(!navigator.userAgent.match(/iPhone/i) || !navigator.userAgent.match(/iPad/i)) {
    //bind your mouseovers...
}

mais vous devez vérifier pour les mûres, les droïdes, les autres appareils tactiles. Vous pouvez aussi lier les mouseover seulement si l'userAgent contient Mozilla, IE, Webkit, ou Opera, mais vous avez encore besoin de screen pour certains périphériques parce que le Droid, par exemple, rapporte sa chaîne userAgent comme:

Mozilla/5.0 (Linux; U; Android 2.0.1; en-us; Droid Build/ESD56) AppleWebKit/530.17 (KHTML, like Gecko) Version/4.0 Mobile Safari/530.17

la chaîne de l'iPhone est similaire. Si vous juste écran pour iPhone, iPod, iPad, Android et Blackberry vous pourriez obtenir la majorité des appareils de poche, mais pas tous.

il suffit de faire une requête css media qui exclut les tablettes et les appareils mobiles et mettre le curseur là-dedans. Vous n'avez pas vraiment besoin de jQuery ou JavaScript pour cela.

@media screen and (min-device-width:1024px) {
    your-element:hover {
        /* Do whatever here */
    }
}

et assurez-vous d'ajouter ceci à votre tête html pour vous assurer qu'il calcule avec les pixels réels et non la résolution.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />