Как применить класс к разным блокам при наведении?
snippet
При наведении на карточку сменяются картинки, проблема в том что при наведении на первую карточку товара, вторая начинает тоже пропадать. Подскажите как применить наведении для каждой карточке отдельно? Спасибо
Дополнительно:
это надо на css делать а не на Js, простой ховер и отображать другой блок с картинкой пф, мда
Ответы:
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для применения класса к разным блокам при наведении мы можем использовать CSS селекторы и псевдоклассы.
Прежде всего, создадим класс, который мы хотим применить к блокам при наведении. Например, назовем его ".highlight":
```html
.highlight {
background-color: yellow;
}
```
Теперь давайте рассмотрим несколько способов применения этого класса к разным блокам при наведении:
1. **С помощью CSS селекторов**:
```html
.block1:hover .highlight {
color: red;
}
.block2:hover .highlight {
color: blue;
}
```
Здесь мы используем селектор ":hover", чтобы применить класс ".highlight" к блокам ".block1" и ".block2" при наведении на них.
2. **С помощью JavaScript**:
```html
document.querySelectorAll('.block').forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('highlight');
});
item.addEventListener('mouseout', () => {
item.classList.remove('highlight');
});
});
```
Здесь мы используем JavaScript, чтобы добавить класс ".highlight" при наведении на блоки с классом ".block" и удалить его при уходе курсора.
3. **С помощью jQuery**:
```html
$('.block').hover(function() {
$(this).toggleClass('highlight');
});
```
Здесь мы использовали jQuery для того, чтобы при наведении на блок с классом ".block" применять или удалять класс ".highlight".
Таким образом, вы можете выбрать подход, который больше всего подходит вашим потребностям и удобен для вас. Надеюсь, это поможет вам решить вашу проблему!