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

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

И как бы все работает, но когда две картинки, то при наведении на первую вторая тоже не затеняется (у них одинаковый класс). Как можно сделать чтобы при наведении на первую картинку вторая затенялась вместе с остальным фоном. Можно сделать отдельный клас для каждой картинки, но нужно сделать без добавленя классов, поскольку картинок может быть очень много.
  • Вопрос задан
  • 142 просмотра
Решения вопроса 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');
});
});
сейчас хоть сто картинок будет
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

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