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

Question

[Валентин Мельник]

Есть код который при наведении на картинку затеняет все кроме самой картинки (добавляет класс видимости блоку, который все затеняет, а у картинки z-index больше чем у тени).

$(document).ready(function() {
  $('.flat-img').mouseenter(function() {
    $('.floor-shadow').addClass('visible');
  });
  $('.flat-img').mouseleave(function() {
    $('.floor-shadow').removeClass('visible');
  });
});

И как бы все работает, но когда две картинки, то при наведении на первую вторая тоже не затеняется (у них одинаковый класс). Как можно сделать чтобы при наведении на первую картинку вторая затенялась вместе с остальным фоном. Можно сделать отдельный клас для каждой картинки, но нужно сделать без добавленя классов, поскольку картинок может быть очень много.

Comments

[Rustam Bainazarov]

Проблема в z-index и контексте наложения.

Используйте JS, чтобы затенять с помощью стилей все остальные картинки, кроме той, на которую навели, т. е. делайте визуальный хак, чтобы выглядело, будто вы затеняете их (с помощью прозрачности, ещё чего-нибудь. Если не нужно анимировать это дело, просто меняйте z-index.

[Rustam Bainazarov]

https://stackoverflow.com/questions/437958/how-can...

$(document).ready(function() {
  $('.flat-img').mouseenter(function() {
    $('.floor-shadow').addClass('visible');
    $(".flat-img").not(this).addClass("вашКласс")
  });
  $('.flat-img').mouseleave(function() {
    $('.floor-shadow').removeClass('visible');
    $(".flat-img").not(this).removeClass("вашКласс")
  });
});

А на класс уже вешайте нужный CSS.

Answer 1

[Waydim]

можно каждой картинке присвоить id и тогда:

$(document).ready(function() {
  $('.flat-img').mouseenter(function() {
   var tempId = (this).id;
document.getElementById(tempId).addClass('visible');
  });
 });

ну или как более универсальный вариант:
при событии hover добавлять элементу любой уникальный атрибут -> выбирать все элементы с этим атрибутом (а он может быть только один, ибо навести курсор на 2 отдельных картинки проблематично :) и присваивать ему класс .floor-shadow. *не забыть убрать атрибут у ВСЕХ элементов при потери фокуса выбранной картинки

Answer 2

[Вазген Алексанян]

скорее вы в 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');
});
});
сейчас хоть сто картинок будет