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

[L2Banners]

Если кому-то будет интересно, в этой теме буду публиковать задачи по верстке, которые помогут попрактиковаться или просто оценить свои знания.

Задача №1:

Заливайте свой код в песочницу, к примеру https://codepen.io

[Steve Dogs]

Я просто привык @L2Banners (https://forum.antichat.xyz/members/891289/) деньги на карту отправлять за решение таких задач.

Задача решена? https://codepen.io/istevedogs/pen/JjzvZaw

[L2Banners]

Задача решена? https://codepen.io/istevedogs/pen/JjzvZaw


Внимательно прочитай условие)

Должно быть наоборот, кнопка на которую наводишь остается, а другие исчезают

[Steve Dogs]

Внимательно прочитай условие)
Должно быть наоборот, кнопка на которую наводишь остается, а другие исчезают


Вот так? - https://codepen.io/istevedogs/pen/JjzvZaw

[L2Banners]

Вот так? - https://codepen.io/istevedogs/pen/JjzvZaw


Хотел похвалить, но нет

В твоем варианте, если курсор попадает в контейнер, например между кнопками, то все кнопки исчезают, а в моем примере я свободно вожу курсором по контейнеру и между кнопками специально, чтобы показать этот момент, так что пока не решено

[un1k]

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:ishover)) {
opacity: 0;
}



~ To select the next siblings:



span:hover ~ span {
opacity: 0;
}



https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP

[Steve Dogs]

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:

~ To select the next siblings:

https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP


Amazing

[L2Banners]

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



https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP


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

[un1k]

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;
}

[un1k]

Forgot the codepen, sorry

https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP

[L2Banners]

https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP


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]

It doesn't work



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

[L2Banners]

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 (https://forum.antichat.xyz/members/890206/) 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.

https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP

[V11]

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

[L2Banners]

https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP


This is a good and simple solution!

[un1k]

делаешь в 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.

https://codepen.io/ofuwdwfe-the-animator/pen/wvOjxrP

[L2Banners]

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


Кидай в codepen посмотрим

[L2Banners]

Варианты решения задачи №1:

https://codepen.io/pershinvitalii/pen/rNRrXLb

https://codepen.io/pershinvitalii/pen/JjzBgvX

https://codepen.io/pershinvitalii/pen/gOEjVzo

https://codepen.io/pershinvitalii/pen/gOEdYbj

https://codepen.io/pershinvitalii/pen/MWxqJMX

https://codepen.io/pershinvitalii/pen/ZEPMaxr

https://codepen.io/pershinvitalii/pen/MWxqOqQ

[L2Banners]

Еще одна задача:

[L2Banners]

Вторая задача не зашла)

Ловите хак по анимированному подчеркиванию ссылок: