Heim > Web-Frontend > Front-End-Fragen und Antworten > So erzielen Sie einen Maus-Versteckeffekt in CSS3

So erzielen Sie einen Maus-Versteckeffekt in CSS3

WBOY
Freigeben: 2022-04-27 17:22:35
Original
2908 Leute haben es durchsucht

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

So erzielen Sie einen Maus-Versteckeffekt in CSS3

本教程操作环境:windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3怎么实现鼠标隐藏效果

cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状

常见鼠标样式如下:

url需使用的自定义光标的 URL。注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标。

default 默认光标(通常是一个箭头)

auto 默认。浏览器设置的光标。

crosshair 光标呈现为十字线。

pointer 光标呈现为指示链接的指针(一只手)

move 此光标指示某对象可被移动。

e-resize 此光标指示矩形框的边缘可被向右(东)移动。

ne-resize 此光标指示矩形框的边缘可被向上及向右移动(北/东)。

示例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
</head>
<style>
div{height:150px;
width:150px;
border:1px solid #000;}
</style> 
<body>
<p>请把鼠标移动到元素上,可以看到鼠标指针发生变化:</p>
<div style="cursor:none"></div>
</body>
</html>
Nach dem Login kopieren

输出结果:

So erzielen Sie einen Maus-Versteckeffekt in CSS3

(学习视频分享:css视频教程

Das obige ist der detaillierte Inhalt vonSo erzielen Sie einen Maus-Versteckeffekt in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage