Comment supprimer / ignorer: survoler le style CSS sur les appareils tactiles


141

Je souhaite ignorer toutes les :hoverdéclarations CSS si un utilisateur visite notre site Web via un appareil tactile. Parce que le :hoverCSS n'a pas de sens, et il peut même être dérangeant si une tablette le déclenche par clic / tap, car il pourrait alors rester jusqu'à ce que l'élément perde le focus. Pour être honnête, je ne sais pas pourquoi les appareils tactiles ressentent le besoin de se déclencher :hoveren premier lieu - mais c'est la réalité, donc ce problème est également la réalité.

a:hover {
   color:blue;
   border-color:green;
   // etc. > ignore all at once for touch devices
}

Alors, (comment) puis-je supprimer / ignorer toutes les :hoverdéclarations CSS à la fois (sans avoir à connaître chacune d'elles) pour les appareils tactiles après les avoir déclarées?


Ceci est similaire à Comment éviter les effets de
survol

1
Je contourne cela avec une solution php où je découvre si l'appareil de visualisation est mobile ou non et utilise la feuille de style correcte avec divers changements basés sur cela. Cela ne répond cependant pas à votre question. Vous pouvez potentiellement utiliser des requêtes @media, mais cela n'est pas garanti non plus lorsque les téléphones et les tablettes ont des résolutions Full HD.
TomFirth

1
Possible duplication de Désactiver les effets de
survol

Réponses:


171

tl; dr utilisez ceci: https://jsfiddle.net/57tmy8j3/

Si vous êtes intéressé par la raison ou les autres options disponibles, lisez la suite.

Quick'n'dirty - supprimer: survoler les styles à l'aide de JS

Vous pouvez supprimer toutes les règles CSS contenant :hover utilisation de Javascript. Cela a l'avantage de ne pas avoir à toucher CSS et d'être compatible même avec les navigateurs plus anciens.

function hasTouch() {
  return 'ontouchstart' in document.documentElement
         || navigator.maxTouchPoints > 0
         || navigator.msMaxTouchPoints > 0;
}

if (hasTouch()) { // remove all the :hover stylesheets
  try { // prevent exception on browsers not supporting DOM styleSheets properly
    for (var si in document.styleSheets) {
      var styleSheet = document.styleSheets[si];
      if (!styleSheet.rules) continue;

      for (var ri = styleSheet.rules.length - 1; ri >= 0; ri--) {
        if (!styleSheet.rules[ri].selectorText) continue;

        if (styleSheet.rules[ri].selectorText.match(':hover')) {
          styleSheet.deleteRule(ri);
        }
      }
    }
  } catch (ex) {}
}

Limitations: les feuilles de style doivent être hébergées sur le même domaine (cela signifie pas de CDN). Désactive les survols sur les périphériques mixtes souris et tactiles tels que Surface ou iPad Pro, ce qui nuit à l'UX.

CSS uniquement - utiliser des requêtes multimédias

Placez toutes vos règles: hover dans un @mediabloc:

@media (hover: hover) {
  a:hover { color: blue; }
}

ou bien, remplacez toutes vos règles de survol (compatible avec les anciens navigateurs):

a:hover { color: blue; }

@media (hover: none) {
  a:hover { color: inherit; }
}

Limitations: fonctionne uniquement sur iOS 9.0+, Chrome pour Android ou Android 5.0+ lors de l'utilisation de WebView. hover: hoverinterrompt les effets de survol sur les anciens navigateurs, hover: nonedoit remplacer toutes les règles CSS précédemment définies. Les deux sont incompatibles avec les périphériques mixtes souris et tactiles .

Le plus robuste - détecter le toucher via JS et ajouter CSS: règles de survol

Cette méthode doit précéder toutes les règles de survol avec body.hasHover. (ou un nom de classe de votre choix)

body.hasHover a:hover { color: blue; }

La hasHoverclasse peut être ajoutée en utilisant à hasTouch()partir du premier exemple:

if (!hasTouch()) document.body.className += ' hasHover'

Cependant, cela aurait les mêmes inconvénients avec les dispositifs tactiles mixtes que les exemples précédents, ce qui nous amène à la solution ultime. Activez les effets de survol chaque fois qu'un curseur de souris est déplacé, désactivez les effets de survol chaque fois qu'un contact est détecté.

function watchForHover() {
  // lastTouchTime is used for ignoring emulated mousemove events
  let lastTouchTime = 0

  function enableHover() {
    if (new Date() - lastTouchTime < 500) return
    document.body.classList.add('hasHover')
  }

  function disableHover() {
    document.body.classList.remove('hasHover')
  }

  function updateLastTouchTime() {
    lastTouchTime = new Date()
  }

  document.addEventListener('touchstart', updateLastTouchTime, true)
  document.addEventListener('touchstart', disableHover, true)
  document.addEventListener('mousemove', enableHover, true)

  enableHover()
}

watchForHover()

Cela devrait fonctionner essentiellement dans n'importe quel navigateur et activer / désactiver les styles de survol selon les besoins.

Voici l'exemple complet - moderne: https://jsfiddle.net/57tmy8j3/
Legacy (à utiliser avec les anciens navigateurs): https://jsfiddle.net/dkz17jc5/19/


Je vous remercie! Juste un commentaire: ne serait-il pas préférable de vérifier d'abord s'il document.styleSheetsexiste au lieu d'utiliser le try/catch?
Simon Ferndriger

1
J'ai utilisé try/catchjuste au cas où une erreur étrange apparaîtrait, qui pourrait planter le script, comme deleteRule ne fonctionnant pas en raison d'une politique de même origine ou d'un support irrégulier sur IE (modifié le commentaire pour refléter cela). Mais oui, dans la plupart des cas, une simple vérification devrait suffire.
lame

1
Il convient de mentionner que les navigateurs de bureau, y compris Firefox, n'entraîneront pas de «non tactile». Ils rapportent comprendre les événements tactiles.
Harry B

3
Cette solution ne fonctionne pas pour les appareils mixtes où le survol fonctionnera pour la souris mais pas pour les événements tactiles
nbar

2
@Haneev c'est correct pour la plupart des cas, mais pas pour le vôtre. Faire fonctionner votre règle ajouterait beaucoup de complexité au code, ce qui rendrait la réponse plus difficile à comprendre. Je suggérerais soit de diviser les règles, soit d'utiliser la 2ème solution, qui est de toute façon plus robuste. Cependant, vous êtes bienvenu pour suggérer une modification, si vous pouvez améliorer la première solution sans la compliquer trop.
lame

43

Adaptation du pointeur à la rescousse!

Comme cela n'a pas été touché depuis un certain temps, vous pouvez utiliser:

a:link {
   color: red;
}

a:hover {
   color:blue;
}

@media (hover: none) {
   a:link {
      color: red;
   }
}

Regardez cette démo à la fois dans le navigateur de votre ordinateur et dans celui de votre téléphone . Pris en charge par les appareils tactiles modernes .

Remarque : gardez à l'esprit que, puisque l'entrée principale (capacité) d'un Surface PC est une souris, elle finira par être un lien bleu, même s'il s'agit d'un écran (tablette) détaché. Les navigateurs utiliseront (devraient) toujours par défaut la capacité d'entrée la plus précise.


Merci, ce serait pratique! Cependant, je l'ai essayé avec Chrome en mode mobile, mais cela n'a pas fonctionné - quand je l'ai "tapé", il est devenu bleu de toute façon ...
Simon Ferndriger

1
@SimonFerndriger C'est juste une limitation des outils de développement Chrome. Essayez d'ouvrir le lien sur un appareil tactile uniquement.
Jason T Featheringham du

1
Fonctionne parfaitement sur iPad Chrome / Safari contre OS X Chrome / Safari. Merci! Enfin la solution élégante que vous voudriez pour un si petit problème visuel.
rakaloof

3
Je viens d'essayer cela sur mon iPhone 6S sous iOS 11 et le lien est devenu bleu.
Lukas Petr

1
Également essayé avec Nexus 5X exécutant Android 8.1.0 et Chrome 68.0.3440.91. Le lien est devenu bleu.
Trevin Avery

12

J'ai rencontré le même problème (dans mon cas avec les navigateurs mobiles Samsung) et je suis donc tombé sur cette question.

Merci à la réponse de Calsal j'ai trouvé quelque chose qui, je pense, exclura pratiquement tous les navigateurs de bureau car il semble être reconnu par les navigateurs mobiles que j'ai essayés (voir capture d'écran d'un tableau compilé: tableau de détection des fonctionnalités du pointeur CSS ).

Les documents Web MDN indiquent que

La fonctionnalité de pointeur CSS @media peut être utilisée pour appliquer des styles en fonction du fait que le mécanisme d'entrée principal de l'utilisateur est un périphérique de pointage et, le cas échéant, de sa précision.

.

Ce que j'ai découvert est ce pointeur: grossier est quelque chose qui est inconnu de tous les navigateurs de bureau dans le tableau ci-joint mais connu de tous les navigateurs mobiles dans le même tableau. Cela semble être le choix le plus efficace car toutes les autres valeurs de mot-clé de pointeur donnent des résultats incohérents.

Par conséquent, vous pouvez créer une requête multimédia comme Calsal décrit mais légèrement modifiée. Il utilise une logique inversée pour exclure tous les appareils tactiles.

Sass mixin:

@mixin hover-supported {    
    /* 
     * https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer 
     * coarse: The primary input mechanism includes a pointing device of limited accuracy.
     */
    @media not all and (pointer: coarse) {
        &:hover {
            @content;
        }
    }
}

a {
    color:green;
    border-color:blue;

    @include hover-supported() {
        color:blue;
        border-color:green;
    }
}

CSS compilé:

a {
  color: green;
  border-color: blue;
}
@media not all and (pointer: coarse) {
  a:hover {
    color: blue;
    border-color: green;
  }
}

Il est également décrit dans cet essentiel que j'ai créé après avoir étudié le problème. Codepen pour la recherche empirique.

MISE À JOUR : Au moment de la rédaction de cette mise à jour, 2018-08-23, et soulignée par @DmitriPavlutin, cette technique ne semble plus fonctionner avec le bureau Firefox.


Merci @DmitriPavlutin, selon le tableau (quand il a été compilé), cela devrait, mais je pourrais jeter un autre coup d'œil.
ProgrammerPer

@DmitriPavlutin Vous avez en effet raison. Mettra à jour la réponse
ProgrammerPer

1
Vous voulez dire qu'il ne fonctionne pas sur Firefox Desktop s'il est utilisé avec un appareil exclusivement tactile? Cela fonctionne très bien avec tout ce que j'ai essayé.
FuzzeeLowgeek

@FuzzeeLowgeek Ça a l'air bien! La dernière fois que j'ai vérifié, c'était le 23/08/2018, donc si vous pouvez le confirmer avec certitude, je peux peut-être mettre à jour la réponse à nouveau?
ProgrammeurPer le

9

Selon la réponse de Jason, nous ne pouvons adresser que les périphériques qui ne prennent pas en charge le survol avec des requêtes multimédias css pures. Nous pouvons également adresser uniquement les périphériques qui prennent en charge le survol , comme la réponse de moogal à une question similaire, avec @media not all and (hover: none). Ça a l'air bizarre mais ça marche.

J'en ai fait un mixin Sass pour une utilisation plus facile:

@mixin hover-supported {
    @media not all and (hover: none) {
        &:hover {
            @content;
        }
    }
}

Mise à jour 2019-05-15 : Je recommande cet article de Medium qui passe par tous les différents appareils que nous pouvons cibler avec CSS. Fondamentalement, il s'agit d'un mélange de ces règles multimédias, combinez-les pour des cibles spécifiques:

@media (hover: hover) {
    /* Device that can hover (desktops) */
}
@media (hover: none) {
    /* Device that can not hover with ease */
}
@media (pointer: coarse) {
    /* Device with limited pointing accuracy (touch) */
}
@media (pointer: fine) {
    /* Device with accurate pointing (desktop, stylus-based) */
}
@media (pointer: none) {
    /* Device with no pointing */
}

Exemple pour des cibles spécifiques:

@media (hover: none) and (pointer: coarse) {
    /* Smartphones and touchscreens */
}

@media (hover: hover) and (pointer: fine) {
    /* Desktops with mouse */
}

J'adore les mixins, c'est ainsi que j'utilise mon mixin hover pour cibler uniquement les périphériques qui le prennent en charge:

@mixin on-hover {
    @media (hover: hover) and (pointer: fine) {
        &:hover {
            @content;
        }
    }
}

button {
    @include on-hover {
        color: blue;
    }
}

cela ne fonctionne pas du tout. vous avez survolé: aucun dans la requête multimédia pour un mixin pris en charge par le survol? vous avez besoin d'un pointeur: grossier selon l'autre réponse ici.
Allan Nienhuis

Avez-vous même essayé ou dites-vous simplement que cela ne fonctionne pas parce que cela a l'air bizarre? C'est pourquoi j'ai écrit "Ça a l'air bizarre" .. Et ça marche pour moi sans pointeur: grossier.
Calsal le

J'ai eu des résultats incohérents avec l'approche CSS à ce sujet sur mon OnePlus 5T (dans Chrome et Firefix). Cela fonctionnait bien sur iOS, mais je ne pouvais pas le faire fonctionner sur le OnePlus. J'ai testé minutieusement en utilisant n'importe quel pointeur et n'importe quel hover
Zeth

6

Je suis confronté à un problème similaire actuellement.

Il y a deux options principales qui me viennent immédiatement à l'esprit: (1) la vérification de la chaîne utilisateur, ou (2) le maintien de pages mobiles séparées en utilisant une URL différente et en demandant aux utilisateurs de choisir ce qui est le mieux pour eux.

  1. Si vous êtes capable d'utiliser un langage de ruban adhésif Internet tel que PHP ou Ruby, vous pouvez vérifier la chaîne utilisateur de l'appareil demandant une page, et simplement servir le même contenu mais avec un <link rel="mobile.css" />style au lieu du style normal.

Les chaînes utilisateur ont des informations d'identification sur le navigateur, le moteur de rendu, le système d'exploitation, etc. Ce serait à vous de décider quels appareils sont «tactiles» ou non tactiles. Vous pourrez peut-être trouver ces informations quelque part et les mapper dans votre système.

R. Si vous êtes autorisé à ignorer les anciens navigateurs , il vous suffit d'ajouter une seule règle au css normal, non mobile, à savoir: EDIT : Erk. Après avoir fait quelques expériences, j'ai découvert que la règle ci-dessous désactive également la possibilité de suivre les liens dans les navigateurs Webkit en plus de désactiver simplement les effets esthétiques - voir http://jsfiddle.net/3nkcdeao/
En tant que tel, vous aurez pour être un peu plus sélectif quant à la façon dont vous modifiez les règles du boîtier mobile que ce que je montre ici, mais cela peut être un point de départ utile:

* { 
    pointer-events: none !important; /* only use !important if you have to */
}

En guise de remarque, la désactivation des événements de pointeur sur un parent, puis leur activation explicite sur un enfant, fait que tous les effets de survol sur le parent redeviennent actifs si un élément enfant entre :hover.
Voir http://jsfiddle.net/38Lookhp/5/

B. Si vous prenez en charge les moteurs de rendu Web hérités, vous devrez faire un peu plus de travail pour supprimer toutes les règles qui définissent des styles spéciaux pendant :hover. Pour gagner du temps à tout le monde, vous voudrez peut-être simplement créer une commande de copie + sédation automatisée que vous exécuterez sur vos feuilles de style standard pour créer les versions mobiles. Cela vous permettrait simplement d'écrire / mettre à jour le code standard et de supprimer toutes les règles de style utilisées :hoverpour la version mobile de vos pages.

  1. (I) Sinon, informez simplement vos utilisateurs que vous disposez d'un m.website.com pour les appareils mobiles en plus de votre site Web.com . Bien que le sous-domaine soit le moyen le plus courant, vous pouvez également avoir une autre modification prévisible d'une URL donnée pour permettre aux utilisateurs mobiles d'accéder aux pages modifiées. À ce stade, vous voudrez vous assurer qu'ils n'ont pas à modifier l'URL chaque fois qu'ils naviguent vers une autre partie du site.

Là encore, vous pourrez peut-être ajouter une ou deux règles supplémentaires aux feuilles de style ou être obligé de faire quelque chose d'un peu plus compliqué en utilisant sed ou un utilitaire similaire. Ce serait probablement plus facile à appliquer: pas à vos règles de style comme div:not(.disruptive):hover {...dans lesquelles vous ajouteriez class="disruptive"des éléments à des choses ennuyeuses pour les utilisateurs mobiles utilisant js ou le langage serveur, au lieu de modifier le CSS.

  1. (II) Vous pouvez en fait combiner les deux premiers et (si vous pensez qu'un utilisateur a erré vers la mauvaise version d'une page), vous pouvez lui suggérer de basculer dans / hors de l'affichage de type mobile, ou simplement d'avoir un lien quelque part qui permet aux utilisateurs de flop d'avant en arrière. Comme déjà indiqué, les requêtes @media peuvent également être utiles pour déterminer ce qui est utilisé pour visiter.

  2. (III) Si vous êtes partant pour une solution jQuery une fois que vous savez quels appareils sont "tactiles" et lesquels ne le sont pas, vous pouvez trouver utile que le survol CSS n'est pas ignoré sur les appareils à écran tactile .


pointer-events- c'est incroyable! C'est exactement ce que je cherchais, merci beaucoup!
Simon Ferndriger

1
@SimonFerndriger Eh bien, j'espère que cela sera utile à l'avenir. N'oubliez pas que, à ce jour, les <a>liens peuvent être inaccessibles sous pointer-events:none. Avec un peu de chance, cela changera plus tard - ou CSS 3.x ou 4.0+ aura pointer-events:navigation-onlyou similaire.
SeldomNeedy

6

essaye ça:

@media (hover:<s>on-demand</s>) {
    button:hover {
        background-color: #color-when-NOT-touch-device;
    }
}

MISE À JOUR: malheureusement, le W3C a supprimé cette propriété des spécifications ( https://github.com/w3c/csswg-drafts/commit/2078b46218f7462735bb0b5107c9a3e84fb4c4b1 ).


Cela résoudrait en effet le problème. Je n'ai jamais entendu parler de cela avant. Dans quelle version de navigateur cela est-il censé fonctionner?
Simon Ferndriger

3
@SimonFerndriger caniuse.com/#feat=css-media-interaction et quelques informations supplémentaires: dev.opera.com/articles/media-features
Skeptic

Bon ... Il n'a pas un large support de navigateur.
Giacomo Paita

C'est super! Merci pour cette solution pratique. J'espère qu'il sera ajouté aux normes W3C.
GProst

heureux de pouvoir aider ^^
Marouen Mhiri

5

Vous pouvez utiliser Modernizr JS (voir également cette réponse StackOverflow ) ou créer une fonction JS personnalisée:

function is_touch_device() {
 return 'ontouchstart' in window        // works on most browsers 
  || navigator.maxTouchPoints;       // works on IE10/11 and Surface
};

if ( is_touch_device() ) {
  $('html').addClass('touch');
} else {
  $('html').addClass('no-touch');
} 

pour détecter la prise en charge de l' événement tactile dans le navigateur, puis attribuer une CSSpropriété régulière , en parcourant l'élément avec la html.no-touchclasse, comme ceci:

html.touch a {
    width: 480px;
}

/* FOR THE DESKTOP, SET THE HOVER STATE */
html.no-touch a:hover {
   width: auto;
   color:blue;
   border-color:green;
}

Cela a également été suggéré par @blade - cependant, l'utilisation de la htmlbalise au lieu de la bodybalise pourrait rendre la lecture un peu meilleure. C'est en fait la solution que j'utilise actuellement. Merci quand même.
Simon Ferndriger

1

Cela m'a été utile: lien

function hoverTouchUnstick() {
    // Check if the device supports touch events
    if('ontouchstart' in document.documentElement) {
        // Loop through each stylesheet
        for(var sheetI = document.styleSheets.length - 1; sheetI >= 0; sheetI--) {
            var sheet = document.styleSheets[sheetI];
            // Verify if cssRules exists in sheet
            if(sheet.cssRules) {
                // Loop through each rule in sheet
                for(var ruleI = sheet.cssRules.length - 1; ruleI >= 0; ruleI--) {
                    var rule = sheet.cssRules[ruleI];
                    // Verify rule has selector text
                    if(rule.selectorText) {
                        // Replace hover psuedo-class with active psuedo-class
                        rule.selectorText = rule.selectorText.replace(":hover", ":active");
                    }
                }
            }
        }
    }
}

1

C'est également une solution de contournement possible, mais vous devrez parcourir votre css et ajouter une .no-touchclasse avant vos styles de survol.

Javascript:

if (!("ontouchstart" in document.documentElement)) {
document.documentElement.className += " no-touch";
}

Exemple CSS:

<style>
p span {
    display: none;
}

.no-touch p:hover span {
    display: inline;
}
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

La source

Ps Mais nous devons nous rappeler que de plus en plus d'appareils tactiles arrivent sur le marché, qui prennent également en charge la saisie de la souris en même temps.


0

Ce n'est peut-être pas encore une solution parfaite (et c'est avec jQuery) mais c'est peut-être une direction / un concept sur lequel travailler: qu'en est-il du faire l'inverse? Ce qui signifie désactiver les états: hover css par défaut et les activer si un événement mousemove est détecté n'importe où sur le document. Bien sûr, cela ne fonctionne pas si quelqu'un a désactivé js. Qu'est-ce qui pourrait empêcher de procéder de cette façon?

Peut-être comme ça:

CSS:

/* will only work if html has class "mousedetected" */
html.mousedetected a:hover {
   color:blue;
   border-color:green;
}

jQuery:

/* adds "mousedetected" class to html element if mouse moves (which should never happen on touch-only devices shouldn’t it?) */
$("body").mousemove( function() {
    $("html").addClass("mousedetected");
});

1
Un problème est en fait qu'il s'agit également d'un .mousemove () lorsque vous cliquez sur quelque chose sur les appareils tactiles.
lars à upstruct

1
Et vous déclencherez probablement cet événement sans interruption, ce qui aura un impact sur les performances. Si cela fonctionne, vous devriez mieux utiliser$('body').one.('mousemove', ...)
Simon Ferndriger

0

Essayez ceci (j'utilise background et background-color dans cet exemple):

var ClickEventType = ((document.ontouchstart !== null) ? 'click' : 'touchstart');

if (ClickEventType == 'touchstart') {
            $('a').each(function() { // save original..
                var back_color = $(this).css('background-color');
                var background = $(this).css('background');
                $(this).attr('data-back_color', back_color);
                $(this).attr('data-background', background);
            });

            $('a').on('touchend', function(e) { // overwrite with original style..
                var background = $(this).attr('data-background');
                var back_color = $(this).attr('data-back_color');
                if (back_color != undefined) {
                    $(this).css({'background-color': back_color});
                }
                if (background != undefined) {
                    $(this).css({'background': background});
                }
            }).on('touchstart', function(e) { // clear added stlye="" elements..
                $(this).css({'background': '', 'background-color': ''});
            });
}

css:

a {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

0

La manière sale ... Pas élégante, mais la manière la plus simple qui peut vous sauver.

Supprimez tout ce qui caractérise le survol.

.your-class:hover:before {
  color: blue;
  background: linear-gradient(to bottom, rgba(231,56,39,0) 0%, #aaaaaa 100%);
}

@media all and (min-width:320px) and (max-width: 960px) {
    .your-class:hover:before {
    color: black;
    background: transparent;
  }
}

0

Si votre problème est lorsque vous touchez / appuyez sur Android et tout le div couvert par une couleur bleue transparente! Ensuite, vous devez simplement changer le

CURSEUR: POINTER; vers CURSOR: DEFAULT;

utilisez mediaQuery pour vous cacher dans le téléphone mobile / tablette.

Cela fonctionne pour moi.


-1

Essayez cette solution jquery 2019 facile, bien que cela existe depuis un certain temps;

  1. ajoutez ce plugin à la tête:

    src = "https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"

  2. ajoutez ceci à js:

    $ ("*"). on ("touchend", function (e) {$ (this) .focus ();}); // s'applique à tous les éléments

  3. Voici quelques variantes suggérées:

    $ (": input,: checkbox,"). on ("touchend", function (e) {(this) .focus);}); // spécifier des éléments

    $ ("*"). on ("cliquer, toucher", function (e) {$ (this) .focus ();}); // inclure l'événement de clic

    css: corps {curseur: pointeur; } // touchez n'importe où pour mettre fin à un focus

Remarques

  • placer le plugin avant bootstrap.js pour éviter d'affecter les info-bulles
  • testé uniquement sur l'iphone XR ios 12.1.12 et l'ipad 3 ios 9.3.5, en utilisant Safari ou Chrome.

Références:

https://code.jquery.com/ui/

https://api.jquery.com/category/selectors/jquery-selector-extensions/


2
En 2019, vous ne devriez pas avoir besoin d'utiliser jQuery - WebAPI est assez puissant et prend en charge toutes les fonctionnalités principales.
acme

Ya ... jQuery en 2019? Que diriez-vous de Flash? Hehehe.
remède
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.