Partagez 6 introductions sur les attributs du pointeur-tutoriel CSS-php.cn

Partagez 6 introductions sur les attributs du pointeur

零下一度

Libérer： 2017-06-02 15:08:47

original

1847 Les gens l'ont consulté

En fait, je connais cet attribut depuis longtemps, mais je ne l'ai jamais étudié. Il m'est arrivé de voir ce mot sur Twitter aujourd'hui, alors je suis allé le rechercher, et cela a juste résolu un petit problème que je rencontrais, alors je l'ai partagé. Eh bien, en fait, il s'agit d'une propriété CSS3 relativement simple. Jetons un coup d'œil à mon introduction détaillée à l'attribut pointeur.

1. Partage de conseils sur l'utilisation de l'attribut pointer-events de CSS pour obtenir des effets de pénétration de la souris

Partagez 6 introductions sur les attributs du pointeur

Tout d'abord, le L'image ci-dessus est une Les produits sur la page de liste des produits d'East Mall ont une icône « Prix choquant » dans le coin supérieur droit. Tout le monde sait qu'elle est absolument positionnée avec une étiquette, qui couvrira l'image du produit ci-dessous. "Shocking Price" Vous ne pouvez pas cliquer sur le lien vers l'image derrière l'image "Hot Price". Bien entendu, nous pouvons également ajouter un lien vers cette icône, ce qui résoudra le problème. (Aujourd’hui, nous ne parlons pas de chose aussi simple, continuons)

L’étendue des responsabilités du CSS et du JavaScript dans les navigateurs modernes devient de plus en plus floue et floue. Par exemple, l'attribut -webkit-touch-callout en CSS peut empêcher la boîte à bulles d'apparaître lorsque l'utilisateur clique dessus dans iOS. Le style des événements de pointeur abordé dans cet article ressemble davantage à JavaScript. Il peut :

1. Empêcher l'action de clic de l'utilisateur de produire un effet
2. Empêcher l'affichage du pointeur de la souris par défaut3. Empêcher les événements d'être déclenchés par le survol et les changements d'état actif dans CSS
4. Empêcher les événements d'être déclenchés par des actions de clic JavaScript
Une propriété CSS peut faire tellement de choses !

Introduction au CSS pour changer la souris en style en forme de main

Dans le p ou d'autres balises définies par vous-même, pour une meilleure expérience, le processus de glissement sera , changez la souris en un geste

Résumez brièvement les styles de CSS correspondants. Ajoutez simplement le curseur:pointeur au p où se trouve

À propos du comportement étrange de l'attribut pointer-events dans css_html/css_WEB-ITnose

Dans ma mémoire, pointer-events est utilisé pour le routage des événements. pour dire, si pointer-events:none est défini sur l'élément parent, l'élément parent n'écoutera plus les événements de la souris (similaires au toucher, au clic, etc.).

Lorsque nous avons besoin de faire cela, nous voulons généralement "pénétrer" le calque parent Lorsque nous cliquons directement sur l'élément enfant, l'élément parent agira comme si de rien n'était. Il s’agit d’informations recueillies à partir de mon corpus de connaissances antérieur. Cela ne semble pas faux maintenant, mais c'est incomplet.

css protège les événements de souris des éléments pointer-events_html/css_WEB-ITnose

//Clics de bouclier

$(&#39;body&#39;).css(&#39;pointer-events&#39;,&#39;none&#39;);

Copier après la connexion

//Restaurer vers par défaut

$(&#39;body&#39;).css(&#39;pointer-events&#39;,&#39;auto&#39;);

Copier après la connexion

Utilisation : Vous pouvez définir les événements de souris des éléments suivants lors de l'apparition du calque ou lors d'un positionnement fixe

Pointeur d'attribut CSS magique-. events_html/ css_WEB-ITnose

Une fois qu'un élément positionné de manière absolue recouvre un lien ou ajoute un élément avec un handle d'événement, le comportement par défaut du lien (saut de page) ou l'événement d'élément ne sera pas déclenché.

Firefox3.6+/Safari4+/Chrome prend désormais en charge un attribut CSS appelé pointer-events. Utilisez cet attribut pour déterminer si vous pouvez pénétrer dans des éléments positionnés de manière absolue pour déclencher certains comportements des éléments suivants

style de souris curseur ??

Lorsque nous présenterons DIV CSS, nous rencontrerons le contrôle du curseur du pointeur de la souris dans l'objet, comme la souris passant par le pointeur et se transformant en forme de doigt. introduisez le contrôle du curseur de style pointeur de la souris. En plus du style de pointeur de souris par défaut du système, vous pouvez définir l'image comme pointeur de souris via CSS. Il est courant que certains sites Web aient divers petits styles d'image pour le pointeur de souris. curseur css.

Partagez 6 introductions sur les attributs du pointeur