CSS Pseudo-classes

-

تستخدم هذه الخاصية لتعريف حالة خاصة ل element،من الأمثلة على ذلك :

  1. تغيير شكل element عند تحريك  mouse فوقه
  2. التحكم بالروابط في a href حسب الحالة (visited , active,، hover  ... الخ)
  3. تحديد شكل element عند اختياره 

طريقة الكتابة.

selector:pseudo-class {
  property: value;
}

قيمة pseudo-class  هنا مختلفه حسب الحاجة، يعني مثلا لو كان المطلوب تغيير شكل  <a Href> فا اكيد نستخدم  الكود التالي للروابط الي ما تم زيارتها :

/* unvisited link */
a:link {
  color: #FF0000;
}

من الأمثلة أيضا اذا كان المطلوب تغيير حجم  ولون <div> مثلا عند تحريك mouse نستخدم : 

Div:hover {
  color: #ff0000;
  font-size: 50px;
}

وهكذا. 

تمام 

نطبق مثال حتي نفهم الموضوع

نعمل صفحة HTML باسم Pseudo ونضيف الكود التالي :

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: rgb(228, 228, 212);
  border: 1px solid gray;
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: large;
}
.button:hover
{
    background-color: rgb(206, 206, 160);
  border: 1px solid rgb(194, 68, 68);
  text-align: right;
  font-family: Arial, Helvetica, sans-serif;
  font-size: larger;
}
</style>
</head>
<body>
    <input class="button" type="button" value="Click Me">
</body>
</html>

شغل الصفحة وشوف النتيجة:

حاول تحرك mouse فوق button واكيد تلاحظ الشكل كيف تغير 
مثال ثاني :

اضف الكود التالي في صفحة HTML

<html>
<head>
<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;
  background-color: rgb(85, 94, 94);
} 
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p><a class="highlight" href="css_syntax.asp">a Href Pseudo</a></p>
</body>
</html>
شغل الصفحة وتأكد من النتيجة 

مثال 3 : 

تطبيق هذه الخاصية لإظهار Tooltip 

<!DOCTYPE html>
<html>
<head>
<style>
p {
  display: none;
  border: 2px solid rgb(15, 15, 15);
  border-radius: 2px;
  background-color: rgb(189, 189, 185);
  padding: 20px;
  animation: pulse 5s infinite;
}
div:hover p {
  display: block;
}
</style>
</head>
<body>
<div>Hover over this div element to show the p element
  <p>مرحبا بكم</p>
</div>
</body>
</html>
جرب تشغيل الصفحة في البداية بتكون :

الان جرب تحريك Mouse فوقها وشوف النتيجة اكيد بتكون :