Задачи по верстке

L2Banners

Front-End Developer
VIP
Участник Новогоднего Фонда 2023
Победитель в номинации 2023
Победитель в номинации 2022
Победитель в номинации 2021
Победитель в номинации 2020
Победитель в номинации 2019
Сообщения
382
Розыгрыши
2
Репутация
346
Реакции
532
Баллы
1 573
Если кому-то будет интересно, в этой теме буду публиковать задачи по верстке, которые помогут попрактиковаться или просто оценить свои знания.

Задача №1:


Заливайте свой код в песочницу, к примеру
 

Я просто привык L2Banners деньги на карту отправлять за решение таких задач.
Задача решена?
 
Вот так? -
Хотел похвалить, но нет :)
В твоем варианте, если курсор попадает в контейнер, например между кнопками, то все кнопки исчезают, а в моем примере я свободно вожу курсором по контейнеру и между кнопками специально, чтобы показать этот момент, так что пока не решено
 
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:
span:has(~ span:is:)hover)) {
opacity: 0;
}

~ To select the next siblings:
span:hover ~ span {
opacity: 0;
}

 
I want to participate but is hard to understand russian))
Task:
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

Yes, this is a good solution. :)

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
 
Task:
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


Yes, this is a good solution. :)

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

Oh, :has is supported by all major browsers, but this can also be made with * but I don't know if I would use it instead of :has

*, button:hover {
opacity: 0;
}
 
Forgot the codepen, sorry

 
It doesn't work

Oh, :has is supported by all major browsers
90%. That's quite enough, I don't argue

Your decision is good, I agree with that.
This is a task for practice and has more than one solution.
 
  • Ха-ха-ха
Реакции: un1k
:ROFLMAO::ROFLMAO:
I just saw now how wrong it is lol

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 do not give unnecessary information so as not to limit the possible number of solutions. This will allow us to find a lot more solutions than I know.
 
  • Мне нравится
Реакции: un1k
I do not give unnecessary information so as not to limit the possible number of solutions. This will allow us to find a lot more solutions than I know.

I made a work around on Steve Dogs solution
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.

 
делаешь в over огромную кнопку с бг фона) при наведении все будет пропадать)
 
делаешь в over огромную кнопку с бг фона) при наведении все будет пропадать)

It won't, as I explained, the :hover of the parent will be trigged only when the button is selected, you can play around on codepen and set a normal width to the button.

 

Варианты решения задачи №1:
 
Последнее редактирование:
Еще одна задача:

 
Последнее редактирование:
Назад
Сверху Снизу