Beberapa hari yang lalu, teman saya meminta bantuan untuk menyelesaikan masalah yang ada di wawancaranya. Pewawancara memberinya potongan kode berikut:
tbody:hover tr { opacity: 0.24; }
Juga menambahkan: "Sekarang, ketika Anda mengarahkan kursor ke atas meja, semua baris menjadi pudar. Dan Anda perlu memastikan bahwa garis yang Anda tunjuk tetap aktif. "
Solusi
Dalam solusi saat ini, ketika Anda mengarahkan kursor ke elemen tbody: hover, semua elemen tr segera mengubah opacity menjadi 0.24.
tbody:hover tr { opacity: 0.24; }
Saya perlu mengubah pemilih sehingga opacity diterapkan ke semua elemen tr kecuali yang ditunjukkan.
Untuk implementasi seperti itu, Anda harus menggunakan hover dan bukan pseudo-class. Dengan bantuan hover, browser akan menentukan bahwa garis itu runcing, dan dengan bantuan bukan itu akan mengerti bahwa tidak ada gaya yang harus diterapkan padanya.
tbody:hover tr:not(:hover) { opacity: 0.24; }
PR
Untuk mengkonsolidasikan, saya menyiapkan tugas pekerjaan rumah di mana perlu untuk memperbaiki kesalahan saat menampilkan gambar dalam teks. Saya menyiapkan markup dan gaya berikut:
<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; }
Kesalahannya adalah bahwa jika gambar adalah elemen pertama, itu masih memiliki margin di atas, tetapi Anda perlu memastikan bahwa itu tidak ada.
<main class="content"> <img src="picture.jpg" alt="some alt"> <p>Some text</p> <p>Some text</p> </main>
Dengan demikian, jika gambar adalah elemen terakhir, maka Anda perlu menghapus indentasi dari bawah.
<main class="content"> <p>Some text</p> <p>Some text</p> <img src="picture.jpg" alt="some alt"> </main>