Creo que el problema no es de CSS sino de diseño.
No es que lo que pedís no se pueda hacer. Pero hay otras formas más simples. Para la estructura que estás usando, casi conviene hacerlo con javascript.
En primer lugar, si tus imágnes ya tienen medidas fijas, las podés poner antes y después del botón con texto usando
:after y
:before.
Eso se maneja más fácil con
:hover que andar apuntando a varios
span.
Pero en vez de cambiar imágenes para simular el encendido, lo que podés hacer es 'pintar' el fondo de una capa. En ésta vas a poner una imagen derecha, el texto, y una imagen izquierda. Las imágenes son rectángulos con semicírculos inscriptos, tal como los hiciste, pero con cada semicírculo transparente; y el "sobrante" con el color del fondo del documento.
Al cambiar
background-color del bloque contenedor con
:hover, se van a ver los medio círculos transparentes y el fondo del texto también transparente de ese color.
Podés tener problemas si cada texto tiene distintos anchos y querés igualarlos, pero como no tengo idea de dónde lo vas a usar...
Imagenes en Menu por CSS Barra de volumen reloj digital en javascript ke funcione en mozilla.. #18