Классный эффект наведения с HAS NOT псевдоклассами
HTML-код
- Опубликовано: 25 авг 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
![[Special Clip] ATEEZ(에이티즈) 홍중 'Why Do You Love'](http://i.ytimg.com/vi/I6XYXQKN_pY/mqdefault.jpg)
Алекс, вы самый лучший преподаватель. Спасибо вам большое за ваши уроки!
Испытал два варианта с :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 ?
как всегда 🔥
😊 все здається наче добре поки до мобільної верстки не дійшло. От тоді ці всі hover вилазять боком.
видео полезное, для меня это новая инфа, спасибо
однако это второе видео которое смотрю на вашем канале и убедительно прошу: соблюдайте чистоту кода при написании стилей, избегайте прописывания тегов и сильного увеличения веса селекторов, используйте классы, не плодите верстальщиков которых будут унижать тимлиды на ревью в продуктовой верстке, если бы вы мне такой код прислали на ревью я бы вас заставил рефачить весь файл стилей. не надо так. еще раз видео полезное, большое спасибо за вашу работу
У меня такая идея возникла. CSS уже поддерживает вложенность селекторов. Та я думаю
что Можно уже и частично отказаться от БЕМ. Давать уникальный имена классов только тем
'блокам' или 'компонентам', кому как угодно, которые являются основными. Например в данном видео
дат уникальное название только контейнеру блока в который вложены все фото, а остальным обращаться
по тегу Например:
.uniq_name_container_images_alexander {
& img {
width: 100%;
/*...*/
&:hover {
/*...*/
}
}
/ *...*/
}
@@Andrii-y3z такой подход верен только в случае если ты уверен что в конкретно данном блоке любой данный тег будет содержать один стиль единый для всех да и в любом случае это не совсем корректно и дело тут не в бэм а в простой читаемости и поддерживаемости, потому я все равно настоятельно рекомендую работать с классами
@@leonidilinskiy8180 Да вы правы. Узнал про алгоритм поиска сложных селекторов они к моему удивлению читаются с права на лево , то есть если есть такой селектор .class1 class2 a то сначала найдутся все эл. 'a' затем выборка будет сделана по class2 а затем уже .class1 . У баз данных вроде также работает алгоритм . Если не так то поправьте меня.
твой хелпер для VS code умеет без copilota мультиэлементы создавать достаточно в конце добавить *n где n это количество элементов которое тебе нужно, не благодари
Те вы хотите сказать, что еммет может сгенерировать png изображения, которые выводятся на страницу по промту? Ведь я просил сопилот именно это сделать.
@@itgid адреса изображений он не проставит, я говорил про множественное создание тегов, вы же в видео делали их копипастой, и сказали об этом, хотя момент спорный я бы скорее всего просто расклонировал тег с уже просталенным атрибутом и поменял тупо числа как это сделали вы) copilot я в работе не использую не могу про его возможности рассуждать
Подавайте українською!
ruclips.net/video/Gzj8VeJnEXU/видео.html
@@itgid Підписався.
Автор курсов сам знает, что ему делать без джунов. благодарю Вас Александр за курсы. Мною было куплены около 5 курсов ваших в 2019 году и я уже более 4 лет работаю удаленно. Спасибо за ваши труды
А ви не розумiете?
has не підтримується у firefox тому треба писати @support(:has)
А теперь скажи это всё на нормальном, человеческом языке.
@@user-wj4pc7te1j все языки для общения людей между собой человеческие держу в курсе, если ты его не понимаешь это не делает его не человеческим