الجمل المضللة :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