Как добавить класс и размыть только один элемент jquery?

Question

[Genri_Rus]

Доброго времени суток всем!
К примеру имеется данная структура:

<div class="block">
	<div><img src="img.png" alt="img_1"><a href="#">Подробнее</a></div>
	<div><img src="img.png" alt="img_2"><a href="#">Подробнее</a></div>
	<div><img src="img.png" alt="img_3"><a href="#">Подробнее</a></div>
</div>

.active {
  position: relative;
  filter: blur(2px);
}

Возникла такая проблема, а именно как сделать так, чтобы при наведении на ссылку произошло размытие только для одной картинки и добавление класса active для размытия картинки, но к данной ссылке этот класс также не применился, а также и к остальным картинкам этот класс не применялся
И после наведения на 2 ссылку данный класс также появлялся только на второй картинке и соответственно тоже ее размывал, при этом у первой размытие уже отсутствовало и т.д.

Пытался при помощи jquery сделать так, но тогда все картинки размываются:

$('.block div a').hover(function () {
        $('.block img').addClass('active');
	},  function () {
        $('.block img ').removeClass('active');
    }),

Answer 1

[Ankhena]

Надо поменять местами ссылку и картинку в коде.
В CSS поменять их обратно через order, если надо.
Использовать CSS :hover
https://jsfiddle.net/w3efugqk/

Comments

[Genri_Rus]

А через jquery нельзя сделать ?

[Ankhena]

Если непременно через JQ, то решается через $(this) и родственные отношения между this и картинкой

[Genri_Rus]

Ankhena, а пример можно ?
Просто через this размытие не происходит почему-то

[Ankhena]

Genri_Rus,
1. если не добавляется класс, то покажите как вы пишете через this
2. если добавляется класс, но не работает размытие, то покажите что написано в классе. И браузер в котором не работает.

[Genri_Rus]

Ankhena,

$('.block div a').hover(function () {
        this.addClass('active');
  },  function () {
       this.removeClass('active');
    }),

.active {
  position: relative;
  filter: blur(2px);
}

[Ankhena]

Genri_Rus,
во-первых, вам нужен объект JQ, т.е. $(this), а не this
во-вторых, класс нужно добавить не ссылке, а картинке, которая идет перед ссылкой, т.е. $(this).prev('img')
jquery.page2page.ru/index.php5/%D0%9F%D0%BE%D0%B8%...
и вот только ему уже класс.

[Ankhena]

Genri_Rus, https://jsfiddle.net/2ezfjrow/

[Genri_Rus]

Ankhena, просто очень благодарю, вот не догадался об элементе prev, очень полезная штука оказывается
Еще такой вопрос, а при помощи css это сложно реализовать ? Просто я в order не очень силен, а вот пример был очень интересный с теми же львами

[Ankhena]

Genri_Rus,

а при помощи css это сложно реализовать ?

Ссылка на пример же прямо в ответе.
order просто меняет порядок отображения флекс-элементов. Флекс-элементы это "дети" элемента с display:flex.
С флексами уже давно пора дружить. И с гридами тоже пора.

[Genri_Rus]

Ankhena, понял - меня больше интересовал именно этот кусочек кода:

.block a:hover + img {
  filter: blur(2px);
}

[Ankhena]

Genri_Rus, соседние селекторы

[Genri_Rus]

Ankhena, я так понял, что без флексов и гридов такой эффект на чистом css не получить ?
Только на jquery ?

[Ankhena]

Genri_Rus, можно картинку внутрь ссылки сложить

[Genri_Rus]

Ankhena, а меня такой вариант не устроит
А вообще работать также будет при таком коде (если картинка будет внутри ссылки) ?

.block a:hover + img {
  filter: blur(2px);
}

[Ankhena]

Genri_Rus,
можно:
1. поменять местами в разметке и использовать .block a:hover + img
2. в разметке вложить картинку в ссылку и использовать .block a:hover img
3. js

[Genri_Rus]

Ankhena, а вообще с точки зрения поддержки для старых браузеров какой лучше вариант использовать ?

[Ankhena]

Genri_Rus, с точки зрения поддержки старых браузеров, будут проблемы с блюром.

С точки зрения разума 2, потом 1.

[Genri_Rus]

Ankhena, а jquery разве плохо поддерживается в старых браузерах ?

[Ankhena]

Genri_Rus, зачем писать лишний код, зачем динамически добавлять классы? Если в css нужно написать одно слово hover?

[Genri_Rus]

Ankhena, дело в том, что у меня слайдер будет работать при загрузке картинок, а там добавляется куча дополнительных классов и дивов под эти самые картинки - всякие position: relative и absolute
Код в css в данном случае ведет себя не очень правильно, все кнопки улетают под картинки

[Ankhena]

Genri_Rus, Это значит: надо поправить разметку и/или стили.
Гадание на кофейной гуще дело благое, конечно.
Так что выкладывайте всю задачу и ваш код в следующий вопрос.

[Genri_Rus]

Ankhena, да слайдер не мой, поэтому там много настроек по дефолту
Знаю одно, что с помощью jquery данный вами представленный вариант работает, а вот с помощью css в виде .block a:hover + img кнопка просто слетает под картинку и никакого размытия не происходит
P.S. Поэтому спасибо вам, что хоть так помогли с методом prev() . . . О)О

[Ankhena]

Genri_Rus, если вы не поменяли местами в коде ссылку и картинку, то эффект вообще мало предсказуем.
Я же не вижу, что там еще у вас в слайдах. Решение было написано на основании того кода, который предоставили.

[Genri_Rus]

Ankhena, да я как раз таки решил поменять местами сначала ссылку, а потом картинку
В итоге все - сама кнопка (в виде ссылки) слетает вниз, это связано с дефолтными настройками у слайдера в виде position: relative и absolute
Поэтому если задавать ссылке position, чтобы кнопка была к примеру спозиционирована относительно картинки, то при наведении на кнопку, ее просто начинает дергать
А бывает иногда просто картинка размывается, а сама кнопка (в виде ссылки) пропадает

[Ankhena]

Genri_Rus,

это связано с дефолтными настройками у слайдера в виде position: relative и absolute

Дефолтные "настройки" прекрасно перебиваются вашими стилями, как в обычном состоянии, так и при наведении.
Дальше без макета и реального кода разговор беспредметный.