Что можно прописать в js, чтоб при наведении на один элемент менялись св-ва другого?
Нужно добиться, чтоб при наведении на кнопку менялись свойства блока (как на фото). Как это можно реализовать?
HTML
<section class="drinks"> <div class="container"> <h3 class="drinks__title title">Popular drinks</h3> <div class="drinks__box"> <div class="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-1.png" alt=""> <h3 class="drinks__block-title">ESPRESSO</h3> <p class="drinks__block-text">Without Milk</p> <p class="drinks__block-price">300 ₽</p> <button onmouseover="" class="drinks__block-btn">ORDER NOW </button> </div> <div class="drinks__block" id="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-2.png" alt=""> <h3 class="drinks__block-title">MOCACCINO</h3> <p class="drinks__block-text" id="drinks__block-text">With Chocolate</p> <p class="drinks__block-price">350 ₽</p> <button onmouseover="hoverOnBtn()" onmouseout="hoverOffBtn()" class="drinks__block-btn">ORDER NOW </button> </div> <div class="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-3.png" alt=""> <h3 class="drinks__block-title">LATTE CARAMEL</h3> <p class="drinks__block-text">With Caramel</p> <p class="drinks__block-price">370 ₽</p> <button onmouseover="" class="drinks__block-btn">ORDER NOW </button> </div> <div class="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-4.png" alt=""> <h3 class="drinks__block-title">FLAT WHITE</h3> <p class="drinks__block-text">With double espresso</p> <p class="drinks__block-price">380 ₽</p> <button onmouseover="" class="drinks__block-btn">ORDER NOW </button> </div> </div> </div> </section> |
<section class="drinks"> <div class="container"> <h3 class="drinks__title title">Popular drinks</h3> <div class="drinks__box"> <div class="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-1.png" alt=""> <h3 class="drinks__block-title">ESPRESSO</h3> <p class="drinks__block-text">Without Milk</p> <p class="drinks__block-price">300 ₽</p> <button onmouseover="" class="drinks__block-btn">ORDER NOW </button> </div> <div class="drinks__block" id="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-2.png" alt=""> <h3 class="drinks__block-title">MOCACCINO</h3> <p class="drinks__block-text" id="drinks__block-text">With Chocolate</p> <p class="drinks__block-price">350 ₽</p> <button onmouseover="hoverOnBtn()" onmouseout="hoverOffBtn()" class="drinks__block-btn">ORDER NOW </button> </div> <div class="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-3.png" alt=""> <h3 class="drinks__block-title">LATTE CARAMEL</h3> <p class="drinks__block-text">With Caramel</p> <p class="drinks__block-price">370 ₽</p> <button onmouseover="" class="drinks__block-btn">ORDER NOW </button> </div> <div class="drinks__block"> <img class="drinks__block-img" src="images/drinks-img-4.png" alt=""> <h3 class="drinks__block-title">FLAT WHITE</h3> <p class="drinks__block-text">With double espresso</p> <p class="drinks__block-price">380 ₽</p> <button onmouseover="" class="drinks__block-btn">ORDER NOW </button> </div> </div> </div> </section>
Дополнительно:
Тут js вообще не нужно, из самого примитивного: поместите кнопку в самый верх, и спозиционируйте абсолютом в нужное вам место. После чего можно приметить любое свойство к любому элементу ниже этой кнопки:
.drinks__block-btn:hover ~ .drinks__block-title { color: white } |
.drinks__block-btn:hover ~ .drinks__block-title { color: white }
И drinks__block не самое удачное название, судя по приставке __block вы в глубине души понимаете, что это блок, который можно назвать к примеру card и ваш код будет выглядеть намного приятнее:
card__btn, card__title и т.д..
<div class="drinks__card card"> <button class="card__btn">ORDER NOW </button> <div class="card__body"> <img class=card__img" src="images/drinks-img-1.png" alt=""> <h3 class="card__title">ESPRESSO</h3> <p class="card__text">Without Milk</p> <p class="card__price">300 ₽</p> </div> </div> |
<div class="drinks__card card"> <button class="card__btn">ORDER NOW </button> <div class="card__body"> <img class=card__img" src="images/drinks-img-1.png" alt=""> <h3 class="card__title">ESPRESSO</h3> <p class="card__text">Without Milk</p> <p class="card__price">300 ₽</p> </div> </div>
Использовать событие mouseover
- Но оно глючит - может пропускать заход, и, чаще, - пропускается выход курсора из элемента
- pddev, согласен
Спозиционировать кнопку абсолютом, самым первым элементом в карточке товара, при наведение на кнопку > менять цвет карточки товара. Js не понадобится, только css.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы изменять свойства одного элемента при наведении на другой элемент с помощью JavaScript, можно использовать методы добавления и удаления классов, а также события mouseover и mouseout.
Пример реализации данной функциональности на JavaScript:
```html
.element1 {
background-color: blue;
color: white;
padding: 10px;
transition: background-color 0.3s, color 0.3s;
}
.element2 {
background-color: red;
color: white;
padding: 10px;
transition: background-color 0.3s, color 0.3s;
}
function changeColor() {
document.querySelector('.element2').classList.add('element2-hover');
}
function resetColor() {
document.querySelector('.element2').classList.remove('element2-hover');
}
```
В данном примере, при наведении на элемент с классом "element1", с помощью функции `changeColor()` мы добавляем класс "element2-hover" к элементу с классом "element2", что позволяет изменить его свойства. При уходе мыши с элемента "element1" срабатывает функция `resetColor()`, которая удаляет добавленный класс и возвращает исходные свойства элементу "element2".
Таким образом, при наведении на один элемент меняются свойства другого элемента.