Задать вопрос
@Poincare
javascript

Как затенить сайт при наведении на картинку?

Есть код который при наведении на картинку затеняет все кроме самой картинки (добавляет класс видимости блоку, который все затеняет, а у картинки z-index больше чем у тени).
$(document).ready(function() {
  $('.flat-img').mouseenter(function() {
    $('.floor-shadow').addClass('visible');
  });
  $('.flat-img').mouseleave(function() {
    $('.floor-shadow').removeClass('visible');
  });
});

И как бы все работает, но когда две картинки, то при наведении на первую вторая тоже не затеняется (у них одинаковый класс). Как можно сделать чтобы при наведении на первую картинку вторая затенялась вместе с остальным фоном. Можно сделать отдельный клас для каждой картинки, но нужно сделать без добавленя классов, поскольку картинок может быть очень много.
  • Вопрос задан
  • 137 просмотров
2 комментария
Подписаться 1 Простой 2 комментария
Решения вопроса 2
Waydim
@Waydim
создать -> улучшить ⇔ развивать :)
можно каждой картинке присвоить id и тогда:
$(document).ready(function() {
  $('.flat-img').mouseenter(function() {
   var tempId = (this).id;
document.getElementById(tempId).addClass('visible');
  });
 });

ну или как более универсальный вариант:
при событии hover добавлять элементу любой уникальный атрибут -> выбирать все элементы с этим атрибутом (а он может быть только один, ибо навести курсор на 2 отдельных картинки проблематично :) и присваивать ему класс .floor-shadow. *не забыть убрать атрибут у ВСЕХ элементов при потери фокуса выбранной картинки
Ответ написан
Комментировать
Комментировать
@VazgXa
HTML верстальщик / Frontend разработчик
скорее вы в css сразу всем .flat-img задал z-index больше всех. так не нужно делать. Напишите в css .flat-img.active {z-index: x} а потом собственно и код в js
$(document).ready(function() {
$('.flat-img').mouseenter(function() {
$(this).addClass('active');
$('.floor-shadow').addClass('visible');
});
$('.flat-img').mouseleave(function() {
$(this).removeClass('active');
$('.floor-shadow').removeClass('visible');
});
});
сейчас хоть сто картинок будет
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Доработать сайт на React + Nest
19 апр. 2024, в 12:05
1500 руб./в час
Разработать программу в CodeSys
19 апр. 2024, в 12:00
250 руб./за проект
Сделать мобильную версию сайта Next.js/React
19 апр. 2024, в 11:54
500 руб./в час
Ещё заказы