Что можно прописать в js, чтоб при наведении на один элемент менялись св-ва другого?

Question

[Overlord934]

Нужно добиться, чтоб при наведении на кнопку менялись свойства блока (как на фото). Как это можно реализовать?

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>

Answer 1

[Виталий Першин]

Тут js вообще не нужно, из самого примитивного: поместите кнопку в самый верх, и спозиционируйте абсолютом в нужное вам место. После чего можно приметить любое свойство к любому элементу ниже этой кнопки:

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

Answer 2

[senator]

Использовать событие mouseover

Comments

[pddev]

Но оно глючит - может пропускать заход, и, чаще, - пропускается выход курсора из элемента

[senator]

pddev, согласен

Answer 3

[Михаил Р.]

Спозиционировать кнопку абсолютом, самым первым элементом в карточке товара, при наведение на кнопку > менять цвет карточки товара. Js не понадобится, только css.