Несколько дней назад мой друг попросил помочь с решением задачи, которая была на его собеседовании. Интервьюер дал ему следующий фрагмент кода:
tbody:hover tr {
opacity: 0.24;
}
Также добавил: “Сейчас, при наведении на таблицу, все строки становятся блеклыми. А требуется сделать так, чтобы строка, на которую навели, оставалась активной”.
В текущем решении при наведении на элемент tbody:hover сразу все элементы tr меняют свою непрозрачность на 0.24.
tbody:hover tr {
opacity: 0.24;
}
Мне же нужно изменить селектор так, чтобы непрозрачность применялась ко всем элементам tr кроме того, на который навели.
Для такой реализации потребуется использовать псевдоклассы hover и not. С помощью hover браузер определит, что на строку навели, а при помощи not он поймет, что к ней не надо применять стили.
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>
К сожалению, не доступен сервер mySQL