|
Если кому-то будет интересно, в этой теме буду публиковать задачи по верстке, которые помогут попрактиковаться или просто оценить свои знания.
Задача №1: Заливайте свой код в песочницу, к примеру https://codepen.io |
Я просто привык @L2Banners деньги на карту отправлять за решение таких задач.
Задача решена? https://codepen.io/istevedogs/pen/JjzvZaw |
Цитата:
Должно быть наоборот, кнопка на которую наводишь остается, а другие исчезают |
Цитата:
|
Цитата:
В твоем варианте, если курсор попадает в контейнер, например между кнопками, то все кнопки исчезают, а в моем примере я свободно вожу курсором по контейнеру и между кнопками специально, чтобы показать этот момент, так что пока не решено |
I want to participate but is hard to understand russian))
The css to do this would be the use of :has and ~ :has To select the previous siblings: Цитата:
Цитата:
|
Цитата:
|
Цитата:
There are 2 buttons, when we hover the cursor over one of them, the second disappears. The task needs to be solved only using HTML and CSS without using javascript Цитата:
Try to solve this without using the pseudo-classes :is() and :has() You can solve this using only one pseudo-class :hover. Then it will be more cross-browser |
Цитата:
Цитата:
|
|
Цитата:
Цитата:
Your decision is good, I agree with that. This is a task for practice and has more than one solution. |
Цитата:
I remember reading an article about * when you recommended me not to use it, it should be possible to do something like this, I don't remember how |
Цитата:
|
Цитата:
I just set pointer-event: none; for the parent and 'all' for the childs, this way the parent will only trigger :hover when the button is selected. https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP |
делаешь в over огромную кнопку с бг фона) при наведении все будет пропадать)
|
Цитата:
|
Цитата:
https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP |
Цитата:
|
Еще одна задача:
|
Вторая задача не зашла)
Ловите хак по анимированному подчеркиванию ссылок: |
| Время: 21:38 |