قبل بضعة أيام ، طلب صديقي المساعدة في حل المشكلة التي كانت في مقابلته. أعطاه القائم بإجراء المقابلة مقتطف الشفرة التالي:
tbody:hover tr { opacity: 0.24; }
وأضاف أيضًا: "الآن ، عندما تحوم فوق الطاولة ، تصبح جميع الصفوف باهتة. وتحتاج إلى التأكد من أن الخط الذي أشرت إليه لا يزال نشطًا. "
قرار
في الحل الحالي ، عندما تحوم فوق tbody: element hover ، فإن كل العناصر tr تغير على الفور عتامةها إلى 0.24.
tbody:hover tr { opacity: 0.24; }
أحتاج إلى تغيير المحدد بحيث يتم تطبيق العتامة على جميع عناصر tr باستثناء النقطة المشار إليها.
لتنفيذ مثل هذا ، سوف تحتاج إلى استخدام التحويم وليس الطبقات الزائفة. بمساعدة أداة التحويم ، سيحدد المتصفح أن الخط قد تم توجيهه ، وبمعنى أنه لن يفهم أنه لا ينبغي تطبيق أي أنماط عليه.
tbody:hover tr:not(:hover) { opacity: 0.24; }
المهمة الرئيسية
للدمج ، قمت بإعداد مهمة واجبات منزلية يلزم فيها تصحيح خطأ عند عرض صورة في نص. أعددت العلامات والأساليب التالية:
<main class="content"> <p>Some text</p> <img src="picture.jpg" alt="some alt"> <p>Some text</p> </main>
.content img { margin-top: 35px; margin-bottom: 35px; }
الخطأ هو أنه إذا كانت الصورة هي العنصر الأول ، فلا يزال بهامش أعلى ، لكن عليك التأكد من عدم وجوده.
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
وفقًا لذلك ، إذا كانت الصورة هي العنصر الأخير ، فأنت بحاجة إلى إزالة المسافة البادئة من الأسفل.
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>