Картинка меняется вместе с цветом ссылки - Вопросы по CSS

<a class ='abc' href ='' ><img src=''></img> link</a>
<style>
.abc {
   color: #ff000;
}
.abc img {
   color: #ff00;
}
.abc:hover {
color: #cc00;}
.abc img:hover {
color: #cc00;
}
</style>

<a class ='abc' href ='' >link</a>
<style>
.abc {
   padding-left: 'x'px(где x - размер картинки)
   color: #ff000;
   background: ('ссылка на не активную картинку');
}
.abc:hover {
   padding-left: 'x'px(где x - размер картинки)
   color: #cc00;
   background: ('ссылка на активную картинку');
}
</style>

<a class ='abc' href ='link' >Афіші</a>
<style>
.abc {
   padding-left: '13'px
   color: #ff000;
   background: ('../images/greyk.jpg');
}
.abc:hover {
   padding-left: '13'px
   color: #cc00;
   background: ('../images/redk.jpg');
}
</style>

<a class="abc" href="link" mce_href="link">Афіші</a>
<mce:style><!--
.abc {
   padding-left: '13'px
   color: #ff000;
   background: ('../images/greyk.jpg');
}
.abc:hover {
   padding-left: '13'px
   color: #cc00;
   background: ('../images/redk.jpg');
}
--></mce:style><mce:style mce_bogus="1"><!--
.abc {
   padding-left: '13'px
   color: #ff000;
   background: ('../images/greyk.jpg');
}
.abc:hover {
   padding-left: '13'px
   color: #cc00;
   background: ('../images/redk.jpg');
}
--></mce:style><style mce_bogus="1"><!--
.abc {
   padding-left: '13'px
   color: #ff000;
   background: ('../images/greyk.jpg');
}
.abc:hover {
   padding-left: '13'px
   color: #cc00;
   background: ('../images/redk.jpg');
}
--></style>

<a href="link" mce_href="link"></a><br mce_bogus="1"></p><p style="height: 5px; padding-left: 90px;"><a href="link" mce_href="link"><img mce_src="images/greyk.jpg" mce_style="border: 0pt none;" onmouseout="this.src='images/greyk.jpg';" onmouseover="this.src='images/redk.jpg';" src="images/greyk.jpg" style="border: 0pt none;"> <span data-scayt_word="Буклети" data-scaytid="3">Буклети</span></a><br>

<a class="class" ="abc" href="ссылка" ="">Афиши</a>

style>
.abc {
   padding-left: 13x13px;
   color: #ff000;
   background: url('../images/greyk.jpg');
}
.abc:hover {
   padding-left: 13x13px;
   color: #cc00;
   background: url('../images/redk.jpg');
}
</style>

<a class="abc" href="ссылка">Афиши</a>

<style>
a.abc {
   padding-left: 13px 13px;
   color: #ff000;
   background: url('../images/greyk.jpg')!important;
}
a.abc:hover {
   padding-left: 13px 13px;
   color: #cc00;
   background: url('../images/redk.jpg')!important;
}
</style>

<a href="link" mce_href="link">
		<img mce_src="images/greyk.jpg" mce_style="border: 0pt none;" onmouseout="this.src='images/greyk.jpg';" onmouseover="this.src='images/redk.jpg';" src="images/greyk.jpg" style="border: 0pt none;"> 
		<span data-scayt_word="Буклети" data-scaytid="3">Буклети</span>
	</a>

onmouseout="this.src='images/greyk.jpg';" onmouseover="this.src='images/redk.jpg';"

a .bullit {background: url("http://kolorovo.com/images/greyk.jpg");width:13px; height:13px; margin-right: 5px; display: inline-block;}
a:hover .bullit {background: url("http://kolorovo.com/images/redk.jpg");}

<a href="/flaery-dl.html">
	<div class="bullit"></div> 
	<span data-scayt_word="Флаєри" data-scaytid="4">Флаєри</span> DL
</a>