Esto:
es el resultado del código de abajo; al pasar el mouse por la "X" mayúscula este se resalta pero, este efecto de "resaltado" provoca que el resto del texto se desplace, quiero evitar ese desplazamiento.
Código HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div><span>This text is a test text</span></div>
<style>
span{
font-size:15pt;
}
</style>
<script>
$('div').each(function() {
var $this = $(this);
$this.html($this.text().replace(/ /g, "<span>X</span>"));
});
$('div span').hover(
function() {
$(this).css('background-color','#ffff66');
$(this).css('padding-left', '15px');
$(this).css('padding-right', '15px');
$(this).css('border', '1px solid black');
},
function() {
$(this).css('background-color','');
$(this).css('padding-left', '0px');
$(this).css('padding-right', '0px');
$(this).css('border', '0px');
}
);
</script>
Lo que busco es que la "X" no se mueva y el efecto tape su derecha e izquierda
Muchas gracias de antemano.