Как починить background-position в :hover для элемента с фоном заданным в атрибуте style?

Question

[KonstantoS]

Есть список, его элемент выглядит так:

<li class="infoItem">
            <div style="background:url('img/bulb.png') no-repeat;"></div>
            <div>текст текст текст текст</div>
        </li>

каждый элемент имеет свой бекграунд. Знаю что в атрибутах писать плохо, но эти элементы потом генерируются php.
Стили пишу такие:

.infoItem div:first-child{
	width:80px;
	height:80px;
	margin:0 auto 20px;
}
.infoItem:hover div:first-of-type{
	background-position:bottom;
}

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

Answer 1

[Виталий Киренков]

Воу... зачем же всё так усложнять то... Ну генерируются программно - ок...
Я думаю раскидать классы для вас не будет проблемой, верно?

<li class="infoItem">
  <div class="img" style="background-image: url('img/bulb.png');"></div>
  <div class="text">текст текст текст текст</div>
</li>

и стили

.infoItem .img {
	width:80px;
	height:80px;
	margin:0 auto 20px;
background-position: 0 0;
background-repeat: no-repeat;
}
.infoItem:hover .img {
	background-position: 0 100%;
}

Answer 2

[Юрий Лобанов]

А в теге есть возможность исправить? Там надо написать не короткой записью, а полной. Т.е.

<div style="background-image: url('img/bulb.png'); background-repeat: no-repeat;"></div>

Все дело в том, что при записи коротким способом браузер сам все дописывает, что Вы не указали, а инлайн-стили, которые Вы пишете в теге, перекрывают те, что в файле css.

Answer 3

[Павел Гоголинский]

Попробуйте добавить !important