css如何使鼠标悬停变色

WBOY
Freigeben: 2021-11-10 11:53:36
Original
30050 Leute haben es durchsucht

在css中,可以通过hover选择器和color属性实现鼠标悬停变色的效果,hover选择器用于选择鼠标指针浮动在上面的元素,color属性用于设置悬停时的颜色;语法“:hover{color:悬停颜色;}”。

css如何使鼠标悬停变色

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

css使鼠标悬停变色的方法:

1、打开html开发工具,创建一个html文件,如图:

1110.10.png

2、在html页面找到标签,在标签里面输入内容,然后用标签把内容覆盖。如图:

1110.15.png

3、修改标签的内容设置颜色为蓝色,如图:

1110.11.png

4、设置鼠标滑过标签,字体变为红色的样式:a:hover{color:red} 。如图:

1110.12.png

5、保存好html文件,使用浏览器打开,首先看到的是蓝色字体,把鼠标放到文字上就会发现蓝色字体变为红色字体。

1110.13.png

1110.14.png

6、实现的所有代码,直接把代码复制到html文件即可看到效果:

注意事项:鼠标悬停时样式改变一定要用到hover选择器

hover选择器用于选择鼠标指针浮动在上面的元素。hover选择器可用于所有元素,不只是链接。在 CSS 定义中,hover必须位于link 和visited之后(如果存在的话),这样样式才能生效。

更多编程相关知识,请访问:编程视频!!

Das obige ist der detaillierte Inhalt voncss如何使鼠标悬停变色. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
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
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!