简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  HTML a标签如何让鼠标悬停变色，css控制a标签鼠标悬停样式详解​

HTML a标签如何让鼠标悬停变色，css控制a标签鼠标悬停样式详解​

寻∝梦
寻∝梦asal
2018-09-07 13:38:1330350semak imbas

这篇文章主要的讲述了关于html a标签让鼠标悬停变色，还有关于css控制鼠标悬停的其它样式。里面有着详细的实例教程，可以让大家学的更快，接下来就让我们一起来看这篇文章吧

首先我们先来看看html中的a标签鼠标悬停的时候变色：

大家应该都知道html中的a标签鼠标悬停的css属性吧，没错，今天我们说的就是它。

:hover：这是在之前用a标签说css样式的时候说过。这个鼠标悬停的功能还不少呢，今天我们就来说说html中的a标签悬停的时候变色。这个大家应该都常用到吧。

我们先来看看完整代码的实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
</body>
</html>

这是一个基础的代码，就定义了一个link_1的名字。作用是当鼠标悬在这个文字的上方的时候，文字就会变色。

我们来看在谷歌浏览器中的显示效果：

tuyi.png

大家看，这是鼠标还没放上去的效果，现在看看鼠标放上去的效果：

tuer.png


这就是鼠标移上去的结果了，是不是和我们设置的一模一样。

说完了鼠标悬停变色的效果了，现在我们该说说鼠标悬停还有的三种效果，我们一起来看下吧：

  • :hover{font-size：60px;}鼠标移上变大

  • :hover{text-decoration:underline;}鼠标移上出现下划线

  • :hover{background:#ccc;}鼠标移上去变背景色（:{background:#ccc;}链接出现背景色）

和上文说的一样，我们在鼠标悬停中可以做很多事，我们现在把它们一起展现出来，（想学更多css样式相关的知识就到PHP中文网css学习手册栏目学习）现在让我们看看代码和效果吧

html a标签css控制样式完整代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文网</title>
<style>
.link_1:hover{color:pink;}
.link_2:hover{font-size:60px;}
.link_3:hover{background:red;}
</style>
</head>
<body>
<a href="#" class="link_1">这里是PHP中文网</a>
<a href="#" class="link_2">这里是PHP中文网</a>
<a href="#" class="link_3">这里是PHP中文网</a>
</body>
</html>

如上面的我们设置了三个css样式的代码，第一个是变色，第二个是变大的，第三个是变背景的。

我们先来一个个的看效果吧，第一个看过了，我们就直接看第二个：

tusan.png

如图，这是一个都没动过的样子，现在我们把鼠标放在第二个连接上面看看效果：

tusi.png

这就是放上去的效果了，是不是很明显，60像素优点大了，但是大家可以用小的像素实验，有效果就行，现在，我们看看第三个吧：

tuwu.png

这第三个效果如图所示，是把鼠标放上去的时候变成了红色的背景，是因为我们设置了红色，所以显示了红色的背景。这样的效果还是很明显的吧。

好了，以上就是我们这篇文章说的html a标签的鼠标悬停变色和鼠标悬停的其它样式的文章了（想学更多css样式的知识，就到PHP中文网css学习手册栏目学习）。有问题的可以在下方提问。

【小编推荐】

css怎么设置无序列表？css的列表样式总结

如何利用css来设置文本的背景颜色？css设置背景颜色代码详解

Atas ialah kandungan terperinci HTML a标签如何让鼠标悬停变色，css控制a标签鼠标悬停样式详解​. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

php css html background
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS中背景图片位置 background-position 的使用方法Artikel seterusnya：css表格怎么添加边框样式？css表格边框样式总结（附完整实例）

Artikel berkaitan

Lihat lagi