CSS : أداة تحديد التمرير
مثال
حدد ارتباطًا ونمطه عند تحريك الماوس فوقه:
a:hover
{
background-color: yellow;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يستخدم :hover
المحدِّد لتحديد العناصر عند تحريك الماوس فوقها.
نصيحة: يمكن استخدام محدد التمرير على جميع العناصر ، وليس فقط على الروابط.
تلميح: استخدم محدد الارتباط: لتحديد نمط الروابط إلى الصفحات غير المقصودة ، ومحدد : زار لتحديد نمط الروابط للصفحات التي تمت زيارتها ، والمحدد النشط: لتحديد نمط الارتباط النشط.
ملاحظة:: يجب أن يأتي التمرير بعد: الرابط و: تمت زيارته (إذا كانا موجودين) في تعريف CSS ، حتى تكون فعالة!
الإصدار: | CSS1 |
---|
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم المحدِّد بشكل كامل.
Selector | |||||
---|---|---|---|---|---|
:hover | 4.0 | 7.0 | 2.0 | 3.1 | 9.6 |
ملاحظة: في IE ، يجب الإعلان عن <! DOCTYPE> لكي يعمل محدد التمرير على عناصر أخرى غير عنصر <a>.
بنية CSS
:hover {
css declarations;
}
مزيد من الأمثلة
مثال
حدد عنصرًا <p> و <h1> و <a> ونمطه عند تحريك الماوس فوقه:
p:hover, h1:hover, a:hover {
background-color: yellow;
}
مثال
حدد ونمط الروابط التي لم تتم زيارتها ، والتي تمت زيارتها ، وقم بالمرور عليها ، والنشطة:
/* unvisited link */
a:link {
color: green;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: red;
}
/* selected link */
a:active {
color: yellow;
}
مثال
روابط النمط بأنماط مختلفة:
a.ex1:hover, a.ex1:active {
color: red;
}
a.ex2:hover, a.ex2:active {
font-size: 150%;
}
مثال
مرر مؤشر الماوس فوق عنصر <span> لإظهار عنصر <div> (مثل تلميح أداة):
div {
display: none;
}
span:hover + div {
display: block;
}
مثال
إظهار وإخفاء قائمة "منسدلة" عند تمرير الماوس:
ul {
display: inline;
margin: 0;
padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
position: absolute;
width: 200px;
display: none;
}
ul li ul li {
background: #555;
display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}
الصفحات ذات الصلة
دروس CSS: روابط CSS
دروس CSS: فصول CSS الزائفة