تغيير لون الزر عند التمرير: حل بديل

عند محاولة تغيير لون زر عند التمرير، قد يكون الأمر محبطًا إذا فشل الحل في إنتاج التأثير المطلوب. خذ بعين الاعتبار نموذج التعليمات البرمجية المقدم:

a.button { ... } أ.زر أ:تحويم{ الخلفية: #383؛

a.button {
   ...
}
a.button a:hover{
     background: #383;
}

يحاول هذا الحل تغيير لون خلفية الرابط عند تمرير مؤشر الماوس فوقه داخل عنصر يحتوي على الفئة "زر". ومع ذلك، فهو لا يعمل لأن المحدد غير صحيح.

لتغيير لون الزر بشكل فعال عند التمرير، الصيغة الصحيحة هي:

a.button:hover{ الخلفية: #383؛

a.button {
   ...
}
a.button a:hover{
     background: #383;
}

في هذه الحالة، يستهدف المحدد "a.button:hover" الرابط "button" نفسه عند تمرير مؤشر الماوس فوقه، مما يسمح بتغيير اللون المقصود.