Классный эффект наведения с HAS NOT псевдоклассами
HTML-код
- Опубликовано: 12 сен 2024
- iTGid.info - курсы Алекса Лущенко
🪬 Курс JavaScript 24/2 : itgid.info/ru/...
👑 Курс JavaScript 24/1 : itgid.info/ru/...
🫶 Поблагодарить автора - монобанк: 5375414126666006 Лущенко О
🍹 Задонатить - www.buymeacoff...
✈️ Задать вопрос через телеграм: telegram.me/it...
Курсы автора:
ReactJS: itgid.info/ru/...
Методы массивов: itgid.info/ru/...
Канал ru: / itgid
Канал UA: / @itgidua-web7836
Алекс, вы самый лучший преподаватель. Спасибо вам большое за ваши уроки!
Испытал два варианта с :has и традиционный. Делал не смотря на код видео только картинки использовал. Так отметил что традиционный вариант без :has и :not оказался сложней так как 1. Нужно точно знать и соблюдать вес селекторов а это будет всегда проблемой в css для тех кто ни каждый день имеет дело с вёрсткой 2. Селектор назначения свойства и селектор отмены свойства может быть в программе в разных местах что усложняет отладку кода. У примера c использованием :has таких проблем нет.
&:has(img:hover) {
& img:not(:hover) {
opacity: 0.5;
filter: grayscale(100%);
}
& img:hover {
border-radius: 40px 0 40px 0;
overflow: hidden;
}
}
.images:hover img:not(:hover) 2 вариант в 1 строку
Вопрос не в тему. Картинки для этого видео были сгенерированы через ИИ и занимают пол-экрана. Будет ли Ютуб считать такие видео как ИИ сгенерированные, которые надо помечать знаком Ai ?
видео полезное, для меня это новая инфа, спасибо
однако это второе видео которое смотрю на вашем канале и убедительно прошу: соблюдайте чистоту кода при написании стилей, избегайте прописывания тегов и сильного увеличения веса селекторов, используйте классы, не плодите верстальщиков которых будут унижать тимлиды на ревью в продуктовой верстке, если бы вы мне такой код прислали на ревью я бы вас заставил рефачить весь файл стилей. не надо так. еще раз видео полезное, большое спасибо за вашу работу
У меня такая идея возникла. CSS уже поддерживает вложенность селекторов. Та я думаю
что Можно уже и частично отказаться от БЕМ. Давать уникальный имена классов только тем
'блокам' или 'компонентам', кому как угодно, которые являются основными. Например в данном видео
дат уникальное название только контейнеру блока в который вложены все фото, а остальным обращаться
по тегу Например:
.uniq_name_container_images_alexander {
& img {
width: 100%;
/*...*/
&:hover {
/*...*/
}
}
/ *...*/
}
@@Andrii-y3z такой подход верен только в случае если ты уверен что в конкретно данном блоке любой данный тег будет содержать один стиль единый для всех да и в любом случае это не совсем корректно и дело тут не в бэм а в простой читаемости и поддерживаемости, потому я все равно настоятельно рекомендую работать с классами
@@leonidilinskiy8180 Да вы правы. Узнал про алгоритм поиска сложных селекторов они к моему удивлению читаются с права на лево , то есть если есть такой селектор .class1 class2 a то сначала найдутся все эл. 'a' затем выборка будет сделана по class2 а затем уже .class1 . У баз данных вроде также работает алгоритм . Если не так то поправьте меня.
😊 все здається наче добре поки до мобільної верстки не дійшло. От тоді ці всі hover вилазять боком.
как всегда 🔥
твой хелпер для VS code умеет без copilota мультиэлементы создавать достаточно в конце добавить *n где n это количество элементов которое тебе нужно, не благодари
Те вы хотите сказать, что еммет может сгенерировать png изображения, которые выводятся на страницу по промту? Ведь я просил сопилот именно это сделать.
@@itgid адреса изображений он не проставит, я говорил про множественное создание тегов, вы же в видео делали их копипастой, и сказали об этом, хотя момент спорный я бы скорее всего просто расклонировал тег с уже просталенным атрибутом и поменял тупо числа как это сделали вы) copilot я в работе не использую не могу про его возможности рассуждать
Подавайте українською!
ruclips.net/video/Gzj8VeJnEXU/видео.html
@@itgid Підписався.
Автор курсов сам знает, что ему делать без джунов. благодарю Вас Александр за курсы. Мною было куплены около 5 курсов ваших в 2019 году и я уже более 4 лет работаю удаленно. Спасибо за ваши труды
А ви не розумiете?
has не підтримується у firefox тому треба писати @support(:has)
А теперь скажи это всё на нормальном, человеческом языке.
@@user-wj4pc7te1j все языки для общения людей между собой человеческие держу в курсе, если ты его не понимаешь это не делает его не человеческим