Hover, как воздействовать на класс или тег выше?

Question

[Антон Вебсайтовский]

Всем привет.
Есть блоки картинок, на картинку я наложил svg , при на ведение на svg, я хочу чтобы картинка становилась прозрачной, пока не вышло так сделать.

Рабочая схема тут:
https://jsfiddle.net/2xn1mbth/2/

Comments

[Андрей Федоров]

а где там svg?

[historydev]

Андрей Федоров, подтверждаю, где там svg?

[Антон Вебсайтовский]

Владимир, как где , подгрузка, но там не знаю как можно было добавить в код, по этому там по середине картинки виден круг, самой иконки не видно. svg не грузит так как не находит от куда, но смысл от этого не меняется, при наведении на круг по центру надо чтоб срабатывало.

[Ankhena]

Антон Вебсайтовский, Ничего не понятно из вашего описания.

Чтобы при наведении на i, что-то происходило с img, в коде сначала должен быть i, а потом img

По-хорошему, ховер нужно вешать на a. Но нужно знать всю задачу полностью, а не кусками.

[Антон Вебсайтовский]

Ankhena, Между прочим не обязательно i пихать выше img.

Ну да вот так вышло: (вроде пробовал так, ну походу пропустил такой вариант).

.dfi a:hover img {
  -webkit-transition:opacity 200ms linear 0ms;
  transition: opacity 200ms linear 0ms;
  opacity:0.5;
  -moz-opacity:0.5;
  filter:alpha(opacity=50);
}

Если что рабочий пример:
https://jsfiddle.net/2xn1mbth/3/

[Валерия Сергеева]

Антон Вебсайтовский, так смысл, вам же нужно было свойство прозрачности при наведении на иконку? а сейчас на всю картинку стоит.

[Ankhena]

Антон Вебсайтовский,

Между прочим не обязательно i пихать выше img.

Если ховер вешать на родителя, то, конечно, нет смысла менять местами детей.

Если нужно, чтобы работали + или ~, то тот на кого ховер должен быть в коде раньше и на одном уровне с изменяемым. Это же основы типов селекторов.

[Антон Вебсайтовский]

Ankhena, + или ~, тож пробовал и не срабатывало )
Но да ладно, вопрос решен ) перебор помог )

Answer 1

[Валерия Сергеева]

Cвойствами css у вас не получится это сделать.
Можно через js, добавьте событие mouseenter на svg и в результате находите родителя или нужный элемент и присваивайте ему необходимые стили.

Comments

[Антон Вебсайтовский]

Вот js я и не хотел использовать.