Как сделать чтобы при наведении на кнопку она меняла цвет другой кнопки?
Хочу чтобы при наведении на одну кнопку менялась эта кнопка но при этом и другая тоже меняла свой цвет, как сделать подскажите люди
https://codepen.io/remontorg/pen/gOdVXjg
|
1 |
<div class="vskrytiye__ot"> <div class="vskrytiye__ot__b"> <a href="tel:88007000000"> <button class="vskrytiye__btn"> <span>Позвонить</span> </button> </a> </div> <div class="vskrytiye__ot__b"> <div class="open__popup"> <button class="vskrytiye__btn blue"> <span>Позвонитe мне</span> </button> </div> </div> </div> |
|
1 |
.vskrytiye__btn { font-size: 22px; padding-top: 25px; padding-right: 30px; padding-bottom: 22px; padding-left: 30px; margin-top: 30px; border-radius: 6px; border-right-color: #fff; color: rgba(42, 41, 49); background-color: rgba(255, 191, 162); transition: all .3s ease 0s; text-transform: uppercase; text-align: center; font-size: 16px; font-weight: 700; } .vskrytiye__btn:hover{ background-color: rgba(131, 127, 155); color: #fff; } .vskrytiye__ot { display: flex; } .vskrytiye__ot__b { margin: 0 15px; } .blue { background-color: rgba(131, 127, 155); color: #fff; } .blue:hover { background-color: rgba(255, 191, 162); color: #1e2f39; } |
https://codepen.io/remontorg/pen/gOdVXjg
Дополнительно:
css селектор :has (не работает в FF)
Или javascript
Сергей Молвов, с has все довольно просто
|
1 |
.vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue { /* Стили для второй кнопки при наведении на первую */ } .vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) { /* Стили для первой кнопки при наведении на вторую */ } |
Заморочки с :not из-за того, что наличие класса .blue - единственное различие между кнопками
Однако можно привязаться к последовательности кнопок в html
|
1 |
.vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn { /* Стили для последней кнопки при наведении на первую */ } .vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn { /* Стили для первой кнопки при наведении на последнюю */ } |
Но так длиннее получается.
Лучше всего будет дать кнопкам разные классы
|
1 |
.vskrytiye__ot:has(.first-btn:hover) .second-btn { /* Стили для второй кнопки при наведении на первую */ } .vskrytiye__ot:has(.second-btn:hover) .first-btn { /* Стили для первой кнопки при наведении на вторую */ } |
Но это не будет работать на данный момент в FireFox!
- я ооочень благодарен вашим ответом, я попробовал последний вариант, пере назвал классы, но ничего не работает...
https://codepen.io/remontorg/pen/gOdVXjg
поменял там вроде всё что надо взгляните пожалста - Сергей Молвов, вроде работает. что не так?
- Сергей delphinpro, Простите но тама вроде на работает...
https://www.youtube.com/watch?v=xVOoE2vdBM4 - Сергей delphinpro, https://www.youtube.com/watch?v=xVOoE2vdBM4
- Сергей delphinpro, При наведении на одну не меняется другая... но я всё равно благодарен за ваш "ответ"... отмечу решением для других (может)
Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.
Оставить комментарий Отменить
Ответы
- Есть ответ! к записи Как уменьшить масштаб меньше 100% в Windows 10 (22H2)
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Аналоги CloudFlare в России?
- Есть ответ! к записи Как называется человек, который дизайн придумает для сайта и сверстает его?
- Есть ответ! к записи Можно ли установить Яндекс.Диск на АльтЛинукс?
- Есть ответ! к записи Картинки мутные только на сафари, есть выход?
- Есть ответ! к записи Keenetic. Как настроить SSTP клиент с сертификатом?
- Есть ответ! к записи Чем заменить executor в aiogram 3?
Чтобы сделать так, чтобы при наведении на одну кнопку она меняла цвет другой кнопки, можно использовать JavaScript. Ниже приведен пример кода на JavaScript, который реализует данное поведение:
В данном примере мы получаем кнопки с классами "button1" и "button2", добавляем обработчики событий наведения мыши на первую кнопку и ухода мыши с нее. При наведении на первую кнопку меняем цвет второй кнопки на красный, а при уходе мыши возвращаем цвет второй кнопки к изначальному.
Этот код можно добавить в скрипт вашей страницы или в отдельный файл JavaScript, который затем подключить к странице. Таким образом, при наведении на одну кнопку будет меняться цвет другой кнопки.