پسیو-کلاس :hover CSS

معین و استفاده

CSS :hover پسیو-کلاس برای انتخاب عناصر در حالت موس روی آن‌ها استفاده می‌شود.

پیشنهاد::hover پسیو-کلاس می‌تواند برای همه عناصر استفاده شود، نه فقط لائیسیلو.

پیشنهاد:استفاده کینارا: :link شاگالنن تارایو لائیسیلو لائیسیلو چالو کینارا، استفاده کینارا: :visited شاگالنن تارایو لائیسیلو لائیسیلو چالو کینارا، استفاده کینارا: :active شاگالنن تارایو لائیسیلو لائیسیلو چالو کینارا.

توجه:در CSS معین می‌شود،:hover باید :link و :visited（اگر بہسا）بعداً چالو!

ئیستیمه

یانارا 1

شاگالنن و تایینو تارایو لائیسیلو:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

تجربة شخصية

یانارا 2

شاگالنن و تایینو تارایو <p>، <h1> و <a> لائیسیلو:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

تجربة شخصية

مثال 3

اختيار وتحديد أنواع النمط للروابط غير الزائرة، الزائرة، النشط، والمنشط:

/* رابط لم يتم زيارتة */
a:link {
  color: green;
}
/* رابط تم زيارتة */
a:visited {
  color: green;
}
/* رابط عند التمرير بالفأرة */
a:hover {
  color: red;
}
/* رابط نشط */
a:active {
  color: yellow;
}

تجربة شخصية

مثال 4

تحديد أنواع النمط المختلفة للروابط:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

تجربة شخصية

مثال 5

تمرير الفأرة فوق عنصر <span> لعرض عنصر <div> (مثل النص التوجيهي):

div {
  display: none;
}
span:hover + div {
  display: block;
}

تجربة شخصية

مثال 6

إظهار وإخفاء قائمة "التنقل" عند التمرير بالفأرة:

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

:hover {
  بيانات css;
}

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يحدد إصدار المتصفح الأول الذي يدعم هذه الصفة المزيفة بشكل كامل.

الصفحات ذات الصلة

دليل:الروابط لـ CSS

دليل:الصفة المزيفة لـ CSS