Каким образом можно использовать JavaScript для изменения свойств одного элемента при наведении на другой?

Для изменения свойств одного элемента при наведении на другой в JavaScript можно использовать события "mouseenter" и "mouseleave". 

Пример кода:

HTML:
```html
<button id="myButton">Наведите курсор</button>
<div id="myBlock"></div>
```

CSS:
```css
#myBlock {
  width: 100px;
  height: 100px;
  background-color: red;
}

#myBlock.hover {
  background-color: blue;
}
```

JavaScript:
```javascript
var button = document.getElementById("myButton");
var block = document.getElementById("myBlock");

button.addEventListener("mouseenter", function() {
  block.classList.add("hover");
});

button.addEventListener("mouseleave", function() {
  block.classList.remove("hover");
});
```

В данном примере, при наведении курсора на кнопку "myButton", добавляется класс "hover" к блоку "myBlock", что приводит к изменению его свойств и смене цвета фона на синий. При убирании курсора с кнопки, класс "hover" удаляется и блок возвращается к исходному состоянию.

<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

Добавить в CSS следующий код:
.card__btn:hover ~ .card__body {
    background-color: white;
} Это позволит при наведении на кнопку изменять цвет фона карточки товара без использования JavaScript.