Как сделать чтобы при наведении на ссылку фон появлялся только у текста, а не у всего класса?

Question

[Евгений]

Всем привет!
Вообщем вот код jsfiddle.net/justasinner/QgV3R/3
Как сделать чтобы при наведении на ссылку фон не появлялся у иконки, а был только у текста?

Answer 1

[MintTea]

Можно добавить span:

<a href="#" class="ar_item">
	<img />
	<span>text</span>
</a>

.ar_item:hover span {
	background: #d0eba6;
}

Comments

[Mikhail Osher]

Действительно. Куда проще. :)

[Евгений]

Работает, спасибо. А можно как то увеличить размер этого фона?

[MintTea]

.ar_item span { padding: 5px; }

Answer 2

[Mikhail Osher]

Задать этой ссылке padding-left равным ширине картинки (может на несколько пикселей больше), а картинку указать в качестве background-image вроде left center no-repeat
По идее должно получиться.

Comments

[Евгений]

Дело в том, что я не могу эту картинку назначить background-image, т.к. у каждой ссылки своя иконка, а их там десятки. Тогда придётся для каждой ссылки делать свой класс?

[Mikhail Osher]

Это нормальная практика. Сделайте link-home, link-bar, link-sauna. Можете подгрузить иконки ссылок спрайтом и выставлять для каждой ссылки свой background-position.

[Александр Вульф]

@Miraage имхо, но это плохая практика.

Answer 3

[Константин Величко]

Например так jsfiddle.net/QgV3R/4/