hover sobre imagen y texto

[baldaweb]

Al pasar el raton sobre el icono me hace el hover sobre el icono y el texto, pero si pongo el raton sobre el texto, solo me hace el hover sobre el texto pero el icono no cambia.

Código HTML:

<div class="pie">
   <div class="pull-left plt-pie"><a href="#"><span id="seccion-A">&nbsp;</span> <span>Seccion A</span></a>
   </div>
</div>
 

Código CSS:

.pie {
  background-color: #1D1D1B;
  height: 28px;
  padding-top: 4px;
  text-align: left;
  padding-left: 40px;
}
 
.plt-pie { 
    display: inline; 
    font-family: "PT Sans Bold"; 
    font-size: 14px; 
}
 
.plt-pie a { 
    color:#a5a5a4; 
    margin-right: 10px;
    text-decoration:none; 
    transition: all 0.3s ease;  
}
.plt-pie a:hover { 
    color: #ffffff; 
    text-decoration: none; 
}
#seccion-A, #seccion-B, #seccion-C { 
    background-image: url('images/iconos-marcas.png'); 
    background-repeat: no-repeat;  
}
 
#seccion-A {background-position: 0px -29px; padding-left: 16px;}
#seccion-A:hover {background-position: 0px -2px; padding-left: 16px;}
 

Saludos.