English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS 参考手册

CSS @规则(RULES)

CSS 属性大全

CSS :hover 选择器

:hover CSS伪类适用于用户使用指示设备虚指一个元素（没有激活它）的情况。这个样式会被任何与链接相关的伪类重写，像:link, :visited, 和 :active等。为了确保生效，:hover规则需要放在:link和:visited规则之后，但是在:active规则之前，按照LVHA的循顺序声明:link－:visited－:hover－:active。:hover伪类可以任何伪元素上使用。

دليل مرجعي كامل للمسافات في CSS

مثال على الخط

选择鼠标移到链接上的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل الأساسيات (oldtoolbag.com)</title>　
<style>　
a:active
{
background-color:lightgreen;
}
</style>
</head>
<body>
<a href="//ar.oldtoolbag.com">oldtoolbag.com</a>
<a href="//www.pcjson.com" target="_top">pcjson.com</a>
<p><b>注意:</b> 当鼠标移动到连接上 :hover 选择器样式链接到该超链接。</p>
</body>
</html>
اختبار لمعرفة ‹/›

定义和用法

:hover在鼠标移到链接上时添加的特殊样式。

提示: :hover 选择器器可用于所有元素，不仅是链接。

提示: :link 选择器设置了未访问过的页面链接样式, :visited 选择器设置访问过的页面链接的样式:active选择器设置当你点击链接时的样式。

注意: 为了产生预期的效果，在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后！！

浏览器兼容性

表格中的数字表示支持该属性的第一个浏览器版本号。

选择器




:hover4.07.02.03.19.6

注意:在 IE 中必须声明 <!DOCTYPE> 才能保证 :hover 选择器能够有效。

相关页面

CSS 教程: CSS Links

CSS 教程: CSS 伪类

مثال على الخط

激活的、已访问的、未访问的或者当有鼠标悬停在其上的链接：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل الأساسيات (oldtoolbag.com)</title>　
<style>
a:link {color:green;}
a:visited {color:green;}
a:hover {color:red;}
a:active {color:yellow;}
</style>
</head>
<body>
<p>ضع الفأرة على هذا الرابط وأضغط عليه: <a href="//ar.oldtoolbag.com/">oldtoolbag.com</a></p>
</body>
</html>
اختبار لمعرفة ‹/›

مثال على الخط

أنماط الروابط المختلفة:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">　
<title>دليل الأساسيات (oldtoolbag.com)</title>　
<style>
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:monospace;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>ضع الفأرة على الرابط لرؤية تغييرات النمط.</p>
<p><a class="ex1" href="/css/">هذا الرابط يغير اللون</a></p>
<p><a class="ex2" href="/css/">هذا الرابط يغير حجم الخط</a></p>
<p><a class="ex3" href="/css/">هذا الرابط يغير لون الخلفية</a></p>
<p><a class="ex4" href="/css/">هذا الرابط يغير نوع الخط</a></p>
<p><a class="ex5" href="/css/">هذا الرابط يغير تزيين النص</a></p>
</body>
</html>
اختبار لمعرفة ‹/›

دليل مرجعي كامل للمسافات في CSS

وظائف CSSدليل اختيارors الخاصة بCSS