Как осуществить смену изображений при наведении курсора?

Question

Elizabeth

javascript

Как осуществить смену изображений при наведении курсора?

Я хочу реализовать смену изображений при наведении курсора, и это работает. Однако, когда у меня несколько карточек, смена изображений происходит только в одной карточке, а в остальных — нет. Что мне нужно исправить, чтобы это работало для всех карточек?

12 октября 2024 г. 7:12

Ответы на вопрос 2

Похожие вопросы

Answer 1

Для реализации смены изображений при наведении курсора на несколько карточек, необходимо убедиться, что каждая карточка имеет свои уникальные обработчики событий и что вы правильно обрабатываете события мыши для каждой карточки.

Вот пример HTML и JavaScript кода, который демонстрирует, как это сделать для нескольких карточек:

### HTML

```html
<div class="card">
    <img src="image1.jpg" alt="Image 1" class="card-image" data-hover="image2.jpg">
    <h2>Card 1</h2>
</div>
<div class="card">
    <img src="image3.jpg" alt="Image 3" class="card-image" data-hover="image4.jpg">
    <h2>Card 2</h2>
</div>
<div class="card">
    <img src="image5.jpg" alt="Image 5" class="card-image" data-hover="image6.jpg">
    <h2>Card 3</h2>
</div>
```

### CSS

```css
.card {
    margin: 20px;
    display: inline-block;
    text-align: center;
}

.card-image {
    width: 200px;
    height: auto;
    transition: transform 0.3s;
}

.card:hover .card-image {
    transform: scale(1.05);
}
```

### JavaScript

```javascript
document.querySelectorAll('.card').forEach(card => {
    const img = card.querySelector('.card-image');
    const originalSrc = img.src;
    const hoverSrc = img.dataset.hover;

    card.addEventListener('mouseenter', () => {
        img.src = hoverSrc;
    });

    card.addEventListener('mouseleave', () => {
        img.src = originalSrc;
    });
});
```

### Пояснение:

1. **HTML**: У вас есть несколько карточек, каждая из которых содержит изображение и заголовок. На изображении установлен атрибут `data-hover`, который содержит URL для изображения, на которое нужно переключиться при наведении.

2. **CSS**: Применяются базовые стили для карточек. Добавление эффекта `transform` при наведении создает небольшой зум эффекта.

3. **JavaScript**:
   - Используется `document.querySelectorAll` для выбора всех карточек.
   - Для каждой карточки устанавливаются обработчики событий `mouseenter` и `mouseleave`, которые меняют изображение при наведении и возвращают оригинальное изображение при уходе курсора.

Теперь, когда вы наведете курсор на любую из карточек, ее изображение будет изменяться на заданное в `data-hover`, и это будет работать для всех карточек на странице.

Answer 2

Картинка всегда меняется в первом блоке .store-big-image на странице. Без вёрстки тут сложно ответить, где именно надо заменить картинку, но попытаюсь угадать 
 target.closest(".store-big-image").style.backgroundImage = `url(${target.getAttribute("src")})`;}