Foros del Web » Creando para Internet » CSS »

onMouseOver DIV visibility

Estas en el tema de onMouseOver DIV visibility en el foro de CSS en Foros del Web. Hola, Soy nuevo en el foro, pongo esto aquí porque el problema creo que tiene que ver mas con CSS, si no es así disculpenme. ...
  #1 (permalink)  
Antiguo 12/03/2010, 21:21
 
Fecha de Ingreso: marzo-2010
Mensajes: 2
Antigüedad: 7 años, 9 meses
Puntos: 0
onMouseOver DIV visibility

Hola, Soy nuevo en el foro, pongo esto aquí porque el problema creo que tiene que ver mas con CSS, si no es así disculpenme.

Estoy haciendo una pagina y me pidieron que hiciera una especie de menú, el cual es una lista (ul, li) que al pasar el mouse sobre un link se muestre una imagen con una breve descripción a un costado en otra tabla.

Investigue posibilidades y utilice el siguiente código. (un ejemplo de un tutorial)


Código HTML:
Ver original
  1. <style type="text/css">
  2. div {
  3. position: relative;
  4. left: 0px;
  5. top: 0px;
  6. width: 250px;
  7. padding: 350px;
  8. display: none;
  9. }
  10.  
  11.  
  12. <script language="JavaScript">
  13. function setVisibility(id, visibility) {
  14. document.getElementById(id).style.display = visibility;
  15. }
  16.  
  17. <body >
  18. <a href='../index.php' onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');">plus2net Home</a><br>
  19. <a href='index.php' onMouseOver="setVisibility('sub2', 'inline');" onMouseOut="setVisibility('sub2','none');">HTML Home</a><br>
  20. <a href='../sql_tutorial/site_map.php' onMouseOver="setVisibility('sub3', 'inline');" onMouseOut="setVisibility('sub3','none');">Sql Home</a><br>
  21. <a href='../php_tutorial/site_map.php' onMouseOver="setVisibility('sub4', 'inline');" onMouseOut="setVisibility('sub4','none');">PHP Home</a><br>
  22. <a href='../javascript_tutorial/site_map.php' onMouseOver="setVisibility('sub5', 'inline');" onMouseOut="setVisibility('sub5','none');">JavaScript
  23.  
  24. Home</a><br>
  25.  
  26.  
  27. <div id="sub1">You are going to plus2net home page</div>
  28. <div id="sub2">Visit html home page</div>
  29. <div id="sub3">SQL home page</div>
  30. <div id="sub4" >You are going to visit PHP home page</div>
  31. <div id="sub5" >JavaScript Home page</div>
  32.  
  33.  
  34. </body>
  35. </html>

Esta hecho con javascript pero el problema es con el CSS; lo que pasa es que al darle un estilo al los div todos los div tendrán esa característica y entonces no se verán debido a que esta el display: none;, y no puedo hacer un estilo especifico con div id (div#algo {})porque se da un id diferente a cada div para crear el efecto.

Mi pregunta es: ¿Como puede hacer para que solo los div que utilice para el efecto tengan ese estilo y los demas div queden igual? (además de crear un estilo para cada div del efecto).
Si no es posible ¿Hay alguna forma de hacerlo todo con CSS sin necesidad de java?

De antemano muchas gracias y espero que puedan ayudarme.

Atentamente:

Ricardo P.
  #2 (permalink)  
Antiguo 13/03/2010, 09:24
Avatar de Ryo
Ryo
 
Fecha de Ingreso: marzo-2008
Ubicación: Bilbao
Mensajes: 269
Antigüedad: 9 años, 9 meses
Puntos: 14
Respuesta: onMouseOver DIV visibility

Clases. Al aplicarlo a CSS es parecido a usar id, con la salvedad de que un id es único y sin embargo multitud de elementos pueden pertenecer a la misma clase.
Código CSS:
Ver original
  1. div.invisible { display: none; }
Así, las características se aplicarán sólo a los div que tengan el atributo class="invisible" (<div class="invisible" id="elquesea">).
  #3 (permalink)  
Antiguo 13/03/2010, 13:24
 
Fecha de Ingreso: marzo-2010
Mensajes: 2
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: onMouseOver DIV visibility

Muchas gracias, me ha servido.
Ya se me hacia que era por ahí, pero no se de CSS.


Etiquetas: javascript, onmouseover, visibilidad
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:02.