Как заставить отобразить псевдоэлемент блока при ховере на нём же?

Question

[Максим Лобанов]

Привет, коллеги-верстаки! Никак не могу понять, что делаю не так =( Вот есть пример: jsfiddle.net/excmax/20e54th3/12 - в нем список блоков внутри оберток (в реале в качестве item выступает картинка, поэтому такая вложенность, так что он нужна). Суть в чем: мне нужно выводить иконку крестика в верхнем правом углу обертки при ховере на неё. Я вроде делаю всё по науке, но смог заставить выводиться крестику только лишь на следующем блоке, а не на текущем. Как сделать так, чтобы он выводился именно на текущем, на котором навели мышку?

Answer 1

[Andrej Sharapov]

jsfiddle.net/20e54th3/16
так вернее чем в примере выше, поскольку вы создаете кнопку для каждого итема, а не для общего контейнера

Comments

[Максим Лобанов]

И правда, в вашем примере итем не становится обратно полупрозрачным при наведении курсора на область крестика. Благодарю! =)

Answer 2

[0xD34F]

Заменить:

.item:hover на .item-wrapper:hover .item

.item-wrapper:hover + .item-wrapper:after на .item-wrapper:hover::after