Maison > Article > interface Web > style de souris CSS

style de souris CSS

藏色散人original: 2021-01-29 16:23:248580parcourir

En CSS, vous pouvez définir le style de la souris via l'attribut curseur. La méthode d'implémentation est la suivante : créez d'abord un exemple de fichier HTML ; puis définissez des balises span et ajoutez des attributs de style aux balises span respectivement ; enfin, définissez différents Utilisez simplement la valeur de l'attribut du curseur pour implémenter différents styles de souris.

L'environnement d'exploitation de cet article : Acer S40-51, Windows10 Home Chinese Edition, HTML5&&CSS3&&HBuilderX.3.0.5

Recommandé : "Tutoriel vidéo CSS"

Style de souris d'écriture CSS

Lorsque nous mettons en page DIV CSS, nous rencontrerons le contrôle du pointeur de la souris dans l'objet, comme la souris passant par le pointeur et se transformer en forme de doigt, etc. Ensuite, nous introduisons 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.

1. Syntaxe du curseur :

cursor : auto | crosshair | default | hand | move | help 
| wait | text | w-resize |s-resize | n-resize |e-resize 
| ne-resize |sw-resize | se-resize | nw-resize |pointer 
| url (url)

Description du curseur de curseur couramment utilisée

1. >

2. div{ Cursor:hand } et div{ Curseur:text } effet de sélection de texte

3. div{ Curseur:move } effet de sélection de déplacement

4. :pointer } Effet de sélection de lien de forme de doigt

5. div{ curseur:url(adresse de l'image url) } définissez l'objet sur l'image

2. >

style de souris CSS 3. Description du pointeur de la souris

le curseur définit ou récupère la forme du curseur prédéfinie par le système utilisée par le pointeur de la souris se déplaçant sur l'objet.

4. Structure de mise en page

p { cursor: text; } /* css注释： 设置鼠标移动到html p对象时鼠标变为文本选择样式 */
a { cursor: pointer; } /* css注释： 设置鼠标移动到a超链接对象时鼠标变为手指形状（链接选择） */
body { cursor: url("小图片地址")} /* 设置鼠标指针默认为一个小图片 */

Exemples de code de certains curseurs différents :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css鼠标样式</title>
</head>

<body>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p>
<span style="cursor:auto">auto：默认，浏览器设置的光标。</span><br>
<span style="cursor:crosshair">crosshair：光标呈现为十字线。</span><br>
<span style="cursor:default">default：默认光标（通常是一个箭头）</span><br>
<span style="cursor:e-resize">e-resize：此光标指示矩形框的边缘可被向右（东）移动。</span><br>
<span style="cursor:help">help：此光标指示可用的帮助（通常是一个问号或一个气球）。</span><br>
<span style="cursor:move">move：此光标指示某对象可被移动。</span><br>
<span style="cursor:n-resize">n-resize：此光标指示矩形框的边缘可被向上（北）移动。</span><br>
<span style="cursor:ne-resize">ne-resize：此光标指示矩形框的边缘可被向上及向右移动（北/东）。</span><br>
<span style="cursor:nw-resize">nw-resize：此光标指示矩形框的边缘可被向上及向左移动（北/西）。</span><br>
<span style="cursor:pointer">pointer：光标呈现为指示链接的指针（一只手）</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize：此光标指示矩形框的边缘可被向下移动（南）。</span><br>
<span style="cursor:se-resize">se-resize：此光标指示矩形框的边缘可被向下及向右移动（南/东）。</span><br>
<span style="cursor:sw-resize">sw-resize：此光标指示矩形框的边缘可被向下及向左移动（南/西）。</span><br>
<span style="cursor:text">text：此光标指示文本。</span><br>
<span style="cursor:w-resize">w-resize：此光标指示矩形框的边缘可被向左移动（西）。</span><br>
<span style="cursor:wait">wait：此光标指示程序正忙（通常是一只表或沙漏）。</span><br>
</body>

</html>

Pour plus de connaissances sur la programmation informatique, veuillez visiter : Enseignement de la programmation

! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment définir une ligne pointillée en CSSArticle suivant：Comment définir une ligne pointillée en CSS

Articles Liés

Voir plus