Как вывести изображение при наведении на ссылку?

Question

[Валерий Суворов]

Коллеги, подскажите пожалуйста, как вывести изображение в виде бабочки в нумерованном списке горизонтального меню?
Требуется сделать как на скриншоте пункт "Главная" с эффектом наведения.

Скриншот:
Изображение для вывода при наведении на ссылку:
Код:
codepen.io/valerun/pen/yOxpqP

Answer 1

[Just_Andrew]

codepen.io/just_andrew/pen/YqOgKV

Answer 2

[Игорь Воронов]

:hover {
background: url(/*img url*/) left center no-repeat;
}

Например?

Comments

[Валерий Суворов]

Не работает(

[Игорь Воронов]

Валерий Путин: да как не работает-то? Это может не работать только если вы не на тот элемент :hover повесили. Ну или его высота = 0, от чего бекграунд не виден. Но у вас там список и каждый его элемент не пустой.

[Игорь Воронов]

Валерий Путин: повесьте какой-нибудь условный класс "withImg" на нужный элемент списка, и будет у вас: #TopMenu li.withImg:hover
И уберите margin у li, сделайте внутренние отступы на паддингах, например.

[Игорь Воронов]

Валерий Путин: можете сделать тегом img и показывать его таким же образом, при наведении, как предложил ниже Just_Andrew. Если у вас много разных картинок для разных элементов списка, то вариант с тегом img точно будет приоритетнее, чем множество классов.