Замена изображений при наведении одно на одно - Вопросы по CSS

<a class="nebo1 <?php echo $back1;?>jcepopup"href="/index.php?option=com_rsform&view=rsform&formId=5&Itemid=153" type="iframe" target="_blank" rel="width[800];height[650]">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/pravoe.png"></a>

<a class="nebo2 <?php echo $back1;?> jcepopup icon-top-right" href="/index.php?option=com_rsform&view=rsform&formId=4&Itemid=152" type="iframe" target="_blank" rel="width[320];height[350]">
<img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/levoe.png"></a>
		</div>

.nebo1:hover {
background: url("1/pravoe_hov.png") no-repeat;
  height: 100px;
  width: 100px;

}

.nebo2:hover {
background: url("1/levoe_hov.png") no-repeat;
  height: 100px;
  width: 100px;

}

<a …>О компании</a>

.nebo1 {
	background: url("images/pravoe.png") no-repeat;
	display:inline-block;
	font-size:0;
	height: 100px;
	width: 100px;
}

.nebo1:hover {
	background: url("images/pravoe_hov.png") no-repeat;
}