innerHTML pero en CSS

[NewJava]

Hola, que tal

He visto cosas impresionantes como menus, y hasta efectos que parece hechos con flash, pero estan hechos con CSS, y la ventaja que he visto de los ejemplos hechos con CSS, es que procuran funcionen para todo navegador a diferencia de que JavaScript es mas dificil lograr esa "Compatibilidad"

Ya ven que el innerHTML, en javascript es hacer que al pasar por ciertos elementos, se muestre cierto contenido en un DIV, ahora me gustaria hacer esto, pero con CSS, creo que seria algo interezante, ver un ejemplo acerca de esto

Saludos

[AlvaroG]

estoy de acuerdo contigo en lo que decís, pero el problema es que CSS no tiene forma de generar contenido complejo (solo puede agregar texto cuando se usan :after y :before), y siempre en el mismo objeto para el que está definida la propiedad (es decir, no se puede hacer que cuando el ratón pase sobre "a", "b" tenga tal o cual texto)

Que se pueda hacer o no dependerá de que sea lo que querés hacer.

Saludos.

[PatomaS]

Hola

Conveniente agregar que Explorer se hace un lío con after y before...

Sobre hacer las cosas con javascript, bueno, ciertamente puede parecer difícil, pero en líneas generales, si se hace uso del DOM en vez de detsctar los navegadores dependiendo de su nombre, la cosa es mucho más fluida y hay menos excepciones, aunque siempre hay cosas que parchear y habitualmente siempre son para que funcionen en explorer.

Felicidad

[sergiold]

Lo que se me ocurre es que pongas una capa con display:none; y que al pasar con el raton (hover) el display este en block.

De esta manera tendrias este efecto.

Saludos,

[fer10]

lo mas seguro es que las cosas que, veas en css y parecidas a flash sean css + javascript lo cual si es posible y que sea compatible minimo con los navegadores mas usados, sienceramente yo cuando utiliso javascritp y css, intento usar lo menos posible funciones de javascript y que sea compatible con IE, y fire fox .. y llamando mucho directamente al ID y alguan propiedad CSS
saludos
FT

[NewJava]

Iniciado por alvlin

estoy de acuerdo contigo en lo que decís, pero el problema es que CSS no tiene forma de generar contenido complejo (solo puede agregar texto cuando se usan :after y :before), y siempre en el mismo objeto para el que está definida la propiedad (es decir, no se puede hacer que cuando el ratón pase sobre "a", "b" tenga tal o cual texto)

Que se pueda hacer o no dependerá de que sea lo que querés hacer.

Saludos.

Tienes razon, en cierta manera, pero...

El innerHTML, pueden tener sus equivalentes con atributos en CSS como los son display o visibility, sin embargo en el siguiente ejemplo se usa JS, lo cual no es lo que yo busco

Código:

<div id="miid" style="display:none">aa</div>
<a onclick="document.getElementById('miid').style.display='block'">aa</a>

Entonces que podemos usar, se pueden utilizar

etiqueta:hoover de manera que en el hoover si sea visible dicho elemento

Aqui un ejemplo:

http://www.cssplay.co.uk/menus/dd_valid_2.html

Me gustaria alguien, nos pudiera explicar mejor como funciona este ejemplo

[NewJava]

Hola Patomas, por supuesto, que DOM es una excelente opcion pero pensando en el 10% de usuarios que no tienen habilitado JS, uno busca opciones mas "universales"

[NewJava]

Iniciado por sergiold

Lo que se me ocurre es que pongas una capa con display:none; y que al pasar con el raton (hover) el display este en block.

De esta manera tendrias este efecto.

Saludos,

Hola sergiold, esa es la idea, me podrias dar un pequeño ejemplo

Gracias de antemano

[fer10]

ese menu se hace con puro css
utlisando el peusecodigo :HOVER en los links no es dificil de hacer..
mentes a dentro del un link los demas links

[AlvaroG]

Iniciado por sergiold

Lo que se me ocurre es que pongas una capa con display:none; y que al pasar con el raton (hover) el display este en block.

¿y cómo le vas a pasar el ratón por encima si el display es none, con lo que no genera ningún elemento en la página? otra cosa es si usaras visibility....

Es mentira lo que dice en la página que enlazaron antes, el código que usa podrá ser CSS válido pero de ninguna manera es HTML válido.
En html NO SE PUEDE poner una tabla dentro de un enlace.
Sin embargo, me gustaría investigar cómo funciona, aunque ya tengo una idea....

Por lo demás, una forma de hacer un menú al pasar el ratón por encima es hacer cajas de enlaces, y mostrar solamente el primero.
Luego, cuando se le pasa el ratón por encima, se le cambia la altura para que quepan todos los enlaces.

Saludos.

[sergiold]

Jajajaj cierto. Mmm... Creo que seguiré así un buen rato...

Se tendría que hacer a partir de un elemento externo a la capa oculta.

Saludos,

[NewJava]

por ejemplo si un DIV tiene display: none; se oculta todo el div y visibility, solo ayuda con ocultar el contenido de ese DIV

Lo que me llama la atencion es que si un elemento tiene un class asignado, como puede ser que haga que el hover de otro elemento tambien se active, si no estas pasando por ese elemento

[NewJava]

y parece ser valida http://validator.w3.org/check?uri=ht...d_valid_2.html

[sergiold]

Bueno este es el código que se utiliza en el ejemplo:

Código HTML:

<style>
/* common styling */
.menu {font-family: arial, sans-serif; width:749px; height:30px; position:relative; margin:0; font-size:11px; margin:50px 0; background:#fff; position:relative;}
.menu ul {padding:0; margin:0; list-style-type: none;}
.menu ul li {float:left; border-left:1px solid #eee; width:106px;}
.menu ul li a, .menu ul li a:visited {display:block; float:left; width:101px; text-decoration:none; padding:0 0 0 5px; height:30px; line-height:30px; color:#000; background:#c9c9a7 url(../../graphics/drop.gif) bottom right no-repeat;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li:hover ul.right_side li {float:right; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul.left_side li {float:left; border:0; border-left:1px solid #eee;}
.menu ul li:hover ul li a.hide {background:#bd8d5e url(../../graphics/drop2.gif) bottom right no-repeat; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#b3ab79; color:#fff;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:##b3ab79; color:#fff;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li:hover ul.right li {float:right;}
.menu ul li:hover ul li:hover a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
</style> 

Supongo que a partir de aquí podrás amoldarlo a lo que necesitas.

Saludos,

[NewJava]

Gracias sergiold ya tenia la hoja de estilos, de cualquier modo te agradesco la amabilidad

Aunque mi duda era como le hacen para que al pasar por un elemento se pudiera activar el hover de otro elemento diferente, en el cual no se esta pasando el raton

Saludos

[sergiold]

Fijate en lo siguiente:

.menu ul li ul {display: none;}

Y ahora en esto:

.menu ul li:hover ul {display:block; (..)}

El segundo ul se refiere a la lista que se muestra cuando el mouse pasa por la primera lista:

.menu ul{}

Saludos,

[NewJava]

Iniciado por sergiold

Fijate en lo siguiente:

.menu ul li ul {display: none;}

Y ahora en esto:

.menu ul li:hover ul {display:block; (..)}

El segundo ul se refiere a la lista que se muestra cuando el mouse pasa por la primera lista:

.menu ul{}

Saludos,

Muchas gracias Sergiold

[AlvaroG]

Bueno, error mío al no ver el doctype.
Es válida porque es XHTML 1.1, que acepta cosas válidas en XML que no lo serían en HTML 4.
Si no, probá hacer una página HTML con una tabla dentro de un enlace e intentá validarla.....


Saludos.

[Jorolo]

Hola a todos.

Puede que os sea de interes: