鼠标经过效果

最新推荐文章于 2025-07-14 09:08:13 发布

最新推荐文章于 2025-07-14 09:08:13 发布 · 180 阅读

文章标签：

#浏览器 #XHTML #HTML

css 专栏收录该内容

5 篇文章

订阅专栏

[b]鼠标经过效果[/b]

------
[b]效果概述：[/b]

鼠标经过，显示不同的背景的效果，

------
[b]实现：[/b]

可以通过 <a> 的 :hover 实现，因为 :hover 被所有主流浏览器支持，因此有较好的兼容性，

------
[b]例子：[/b]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
/* 鼠标经过效果，用 a 标签实现 */
.link_one,.link_one:link,.link_one:visited {width: 60px;height: 40px;color:#FFF;background-color: #0F0;text-decoration: none;}
.link_one:hover {background-color: #FF0;color:#F00;}
</style>
</head>
<body>
	<a href="#" class="link_one" onclick="alert(1);">link</a>
</body>
</html>

------