Problemón: cambiar 3 imágenes por hover

[Immelman]

He llegado a un problema el cual no estoy seguro si lo puedo resolver por CSS.

Resulta que estoy haciendo botones expandibles, los cuales les hice 4 clases:

#boton: será contenedor del botón.
#boton_izquierda: con una imagen con el borde izquierdo.
#boton_centro: con una imagen que se repite en X, para que se expanda.
#boton_derecha: con una imagen con el borde derecho del botón.

Y en el código lo implemento así:

Código:

<div class="boton">
  <div class="bboton_izquierdaoton"></div>
  <div class="boton_centro">Home</div>
  <div class="boton_derecha"></div>
</div>

Pues bien hasta acá todo ok, defino el boton por divs y pongo el contenido y este se expande y queda perfecto.

El problema que me ha surgido es que ahora quiero que cuando se pase el puntero por encima del botón me gustaría cambiar las 3 imagenes de las clases al mismo tiempo, para cambiar el color del botón completo (no solo al centro, por ejemplo).

Hasta ahora no se me ocurre como hacerlo, les agradecería que me pudieran ayudar... quizás estoy haciendo un lío y hay otra forma más fácil de hacer botones expandibles, para poder cambiarles el fondo, no se...

ayuda plz!

[Tecna]

Buenas,

poderse, se puede, pero no es lo correcto y además ensucia mucho el código tener que meter 4 elementos para hacer 1 botón. Si ese botón va a llevar a otro documento lo correcto sería poner un enlace y si es un botón para enviar un formulario se debería usar el boton submit que para eso está, ya que si se activa el evento por otros métodos la página queda inaccesible si no se dispone de esos métodos como por ejemplo con javascript, o si no estuviera disponible el css. Se podría hacer de forma más correcta usando sólo dos elementos <li> y <a> y así el código sería adecuado y accesible y no hay que añadir elementos extra.

Con la pseudoclase hover se pueden controlar los elementos siempre y cuando estén dentro del elemento al que se ha aplicado, asi que en el ejemplo que has puesto funcionaría si lo aplicas a "boton". Por ejemplo:

Código CSS:

#boton:hover #boton_centro {
        background: #ff0;
/* Cambiaría el color de #boton_centro al pasar el raton sobre #boton */
}
 

Pero algunas versiones de explorer sólo admiten pseudoclases en enlaces.

Parece que tienes un poco de lio con los identificadores, si es un id se usa # pero si es una clase se usa un punto.

[Immelman]

Hola, gracias por responder.

Si quise decir clases, y puse #, debería haber puesto un punto, pero en el código lo tengo bien.

Al referirme al botón la verdad no me refería a un input de un formulario, es solo un botón para el menú.

Puse varias clases para hacer el boton expandible, o sea que independiente del texto que ponga el botón tome el ancho del texto, quizás me estoy haciendo un lio innecesario :S