Tagbordure

[jQuery][CSS][Internet Explorer] Bug de détection de la pseudo-classe :hover ou de l’événement mouseover sur une bordure CSS

Problème:

Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.

Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).

Solution:

Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.

La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.

Le code CSS généré est le suivant:

Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :

Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure:

[CSS] Ajouter des diviseurs verticaux de même hauteur

Source : Add vertical dividers with CSS | Simulation JSFiddle

Petite subtilité avec la grille Bootstrap

Les classes .col-* ont déjà la propriété position avec la valeur relative. Il faudra la surcharger avec la valeur initial.

Autre technique en utilisant une image et les backgrounds multiples de CSS3

Pour, par exemple, 3 colonnes :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑