
03.02.2024, 21:15
|
|
Постоянный
Регистрация: 20.01.2016
Сообщений: 403
С нами:
5428363
Репутация:
408
|
|
Если кому-то будет интересно, в этой теме буду публиковать задачи по верстке, которые помогут попрактиковаться или просто оценить свои знания.
Задача №1:
Заливайте свой код в песочницу, к примеру https://codepen.io
|
|
|

03.02.2024, 23:08
|
|
Новичок
Регистрация: 02.02.2024
Сообщений: 0
С нами:
1200678
Репутация:
0
|
|
|
|
|

03.02.2024, 23:16
|
|
Постоянный
Регистрация: 20.01.2016
Сообщений: 403
С нами:
5428363
Репутация:
408
|
|
Внимательно прочитай условие)
Должно быть наоборот, кнопка на которую наводишь остается, а другие исчезают
|
|
|

03.02.2024, 23:43
|
|
Новичок
Регистрация: 02.02.2024
Сообщений: 0
С нами:
1200678
Репутация:
0
|
|
|
|
|

04.02.2024, 00:12
|
|
Постоянный
Регистрация: 20.01.2016
Сообщений: 403
С нами:
5428363
Репутация:
408
|
|
Хотел похвалить, но нет
В твоем варианте, если курсор попадает в контейнер, например между кнопками, то все кнопки исчезают, а в моем примере я свободно вожу курсором по контейнеру и между кнопками специально, чтобы показать этот момент, так что пока не решено
|
|
|

04.02.2024, 00:33
|
|
Познающий
Регистрация: 04.10.2023
Сообщений: 41
С нами:
1376200
Репутация:
0
|
|
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
|
|
|

04.02.2024, 00:40
|
|
Новичок
Регистрация: 02.02.2024
Сообщений: 0
С нами:
1200678
Репутация:
0
|
|
|
|
|

04.02.2024, 00:52
|
|
Постоянный
Регистрация: 20.01.2016
Сообщений: 403
С нами:
5428363
Репутация:
408
|
|
Сообщение от un1k
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
|
|
|

04.02.2024, 01:04
|
|
Познающий
Регистрация: 04.10.2023
Сообщений: 41
С нами:
1376200
Репутация:
0
|
|
Сообщение от L2Banners
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;
}
|
|
|

04.02.2024, 01:18
|
|
Постоянный
Регистрация: 20.01.2016
Сообщений: 403
С нами:
5428363
Репутация:
408
|
|
It doesn't work
Сообщение от un1k
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.
|
|
|
|
 |
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|