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

[L2Banners]

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

Задача №1:

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

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[Steve Dogs]

Я просто привык @L2Banners деньги на карту отправлять за решение таких задач.
Задача решена?

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[L2Banners]

Задача решена?

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

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

 

[Steve Dogs]

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

Вот так? -

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[L2Banners]

Вот так? -

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

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

 

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

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

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

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

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

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

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

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[L2Banners]

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

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 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.

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[V11]

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

 

[L2Banners]

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

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.

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[L2Banners]

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

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

 

[L2Banners]

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

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

Вы не можете просматривать ссылку пожалуйста воспользуйтесь следующими ссылками Вход или Регистрация

 

[L2Banners]

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