Tema: onMouseOver DIV visibility
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/03/2010, 21:21
rikqp
 
Fecha de Ingreso: marzo-2010
Mensajes: 2
Antigüedad: 14 años, 8 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. <html>
  2. <style type="text/css">
  3. div { 
  4. position: relative; 
  5. left: 0px; 
  6. top: 0px; 
  7. width: 250px; 
  8. padding: 350px; 
  9. display: none;
  10. } 
  11. </style>
  12.  
  13.  
  14. <script language="JavaScript">
  15. function setVisibility(id, visibility) {
  16. document.getElementById(id).style.display = visibility;
  17. }
  18. </script>
  19.  
  20. <body >
  21. <a href='../index.php' onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');">plus2net Home</a><br>
  22. <a href='index.php' onMouseOver="setVisibility('sub2', 'inline');" onMouseOut="setVisibility('sub2','none');">HTML Home</a><br>
  23. <a href='../sql_tutorial/site_map.php' onMouseOver="setVisibility('sub3', 'inline');" onMouseOut="setVisibility('sub3','none');">Sql Home</a><br>
  24. <a href='../php_tutorial/site_map.php' onMouseOver="setVisibility('sub4', 'inline');" onMouseOut="setVisibility('sub4','none');">PHP Home</a><br>
  25. <a href='../javascript_tutorial/site_map.php' onMouseOver="setVisibility('sub5', 'inline');" onMouseOut="setVisibility('sub5','none');">JavaScript 
  26.  
  27. Home</a><br>
  28.  
  29.  
  30. <div id="sub1">You are going to plus2net home page</div>
  31. <div id="sub2">Visit html home page</div>
  32. <div id="sub3">SQL home page</div>
  33. <div id="sub4" >You are going to visit PHP home page</div>
  34. <div id="sub5" >JavaScript Home page</div>
  35.  
  36.  
  37. </body>
  38. </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.