Смена картинки по наведению, как вывести нормально текст рядом?

Question

[allaspaniel]

Подскажите,пожалуйста.
https://jsfiddle.net/zLwscxwo/1/
Цель - получить текст в ОДНУ строку, при наведении на который будет меняться картинка рядом.
Не могу понять как это сделать. Позиционирование не помогло , потому что из-за ширины картинки такую же ширину принимает и текст.

Answer 1

[Максим Е]

Велосипедище :)

Первый вариант:

a.use { 
	  background: url('https://learn.javascript.ru/article/css-sprite/sprites-example.png') no-repeat;
    padding-left: 40px;
} 

a.use:hover { 
    background-position: -85px -50px; 
}

<a href="" class="use">
  <span class="text">Use the force</span>
</a>

Спрайт пересоберите по советам на этой странице

Второй вариант:

a.use span.test{ 
	  background: url('https://learn.javascript.ru/article/css-sprite/sprites-example.png') no-repeat;
    padding-left: 40px;
} 

a.use:hover span.test{ 
    background-position: -85px -50px; 
}

<a href="" class="use">
<span class="test"></span><span class="text">Use the force</span>
</a>

Comments

[allaspaniel]

спасибо!

Answer 2

[Михаил Чирский]

https://jsfiddle.net/zLwscxwo/3/

Можно вот так, важно, чтобы вы поняли, почему у вас текст себя так ввел, все примеры, включая мой - костыль, такие вещи делаются, во 1 через список, ul li, во 2 через ::after, ::before, т.к у вас спрайт, который paddingom не поправить нормально.

Comments

[allaspaniel]

спасибо,буду пробовать