Menú Horizontal ":hover"

[jarega88]

Buenas tardes, soy nuevo en estos lares, por lo que pido disculpas de antemano por los fallos que pueda cometer. Gracias.

Estoy diseñando una web con un menú horizontal con cajitas redondeadas.
Maldita la hora que decidí redondear los bordes de las cajas del menú.

Para conseguir el efecto de redondez de los bordes, diseñé primero en Photoshop y luego recorté ambos laterales (dch e izq).
Cada caja queda de esta forma:
<div>ImagenLateralIzq</div><div>Texto</div><div>ImagenLateralDcho</div>

A la hora de hacer el :hover de la parte central, perfecto, cambio el color de fondo y listo, pero para hacer los :hover de las img de los laterales, tengo que pasar por encima de ellos, y lo que quiero es que cambie todo el grupo cuando pase por cualquier elemento del grupo.

Espero que alguien pueda solucionarme, y que no sea una chorrada como un piano... o sí.

Muchas gracias de antemano!

[RafaRG]

¿y si en vez de usar imágenes de fondo, usas un div con la propiedad border-radius en su css?
por ejemplo:

Código PHP:

  <style type text/css>
#div1 {
   width:300px;
   height:50px;
   border-radius:25px;
   background-color:red;
   }
#div1:hover {
   background-color:green;
   }
</style>
<div id="div1">Texto de caja</div>  
   

según este código que he puesto, el div div1 tendrá un ancho de 300 píxeles, un alto de 50 píxeles, los bordes redondeados y el fondo rojo. al hacer hover sobre él, el fondo se cambiará de color al verde.
no sé si es éso lo que buscabas. en ese caso, coméntalo y a ver si sacamos más soluciones.

[jarega88]

La idea es esa!
No conocía la opción de border-radius, pero de todas formas, da algún tipo de problema esta propiedad en IE?

De todas formas lo probaré y te comento. Muchas gracias!!

[charlyalegret]

Hola! en el siguiente artículo te explican una manera de hacerlo que he comprobado que funciona para hacer lo que tu dices!
http://www.desarrolloweb.com/articul...s-con-css.html

otra opcion es usar el atributo border-radius, pero es css 3 y incompatible con algunos navegadores....

[charlyalegret]

Nota que acabo de comprobar: lo que se menciona en el artículo tampoco es compatible con ie 8 o inferior...

[RafaRG]

el atributo border-radius es compatible con la mayoría de los navegadores. solo de Internet Explorer 8 para abajo no funciona (lo que quiere decir que a partir de Intenet Explorer9 sí). aunque yo no me preocuparía mucho por eso, ya que es cuestión de tiempo (ponle unos meses) de que la gente se pase a los nuevos navegadores (Google Chrome, Mozilla Firefox, Opera...) o que actualice a Internet Explorer 9.

[charlyalegret]

Iniciado por RafaRG

aunque yo no me preocuparía mucho por eso, ya que es cuestión de tiempo (ponle unos meses) de que la gente se pase a los nuevos navegadores

Seguramente será cuestión de tiempo, aunque a dia de hoy según las estadísticas de mi web (que no tienen porqué ser extrapoladas ni mucho menos, pero como ejemplo):

Mozilla 5 24,06%
Safari 15,44%
Internet Explorer 8.0 12,99%
Internet Explorer 7.0 7,11%
Firefox 3.6 3,48%
Internet Explorer 6.0 3,01%
Netscape 1,18%
Firefox 3.5 0,66%
Internet Explorer 5.5 0,38%


el ie9 ni siguiera sale!! y ie8+ie7+ie6 = 23%...
Yo por si acaso, aconsejaría dejar un css especial y más sencillo para ie 8 e inferior!

Saludos!

[RafaRG]

¿entonces qué hacemos? ¿adaptamos los códigos para que funcione en los navegadores antiguos, aun siendo una minoría? en mi opinión, se debería invertir más en el futuro, es decir, en los nuevos navegadores y aprovechar las nuevas tecnologías. que cada uno quiera o no actualizar su navegador es cosa suya.
obviamente, se le debe dar un soporte mínimo a lo desfasado, pero no debe ser una limitación para aprovechar los nuevos recursos que nos ofrecen.

[ArturoGallegos]

border-radius cuenta con sus respectivos hacks para los navegadores que no lo soportan,

para el caso de IE se puede implementar el este script -> clic aquí

con lo cual la sintaxis completa seria

Código CSS:

.borde{border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);}