onMouseOver DIV visibility

rikqp · #1 (**permalink**) 12/03/2010, 21:21

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<html>
<style type="text/css">
div { 
position: relative; 
left: 0px; 
top: 0px; 
width: 250px; 
padding: 350px; 
display: none;
} 
</style>
 
 
<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
 
<body >
<a href='../index.php' onMouseOver="setVisibility('sub1', 'inline');" onMouseOut="setVisibility('sub1','none');">plus2net Home</a><br>
<a href='index.php' onMouseOver="setVisibility('sub2', 'inline');" onMouseOut="setVisibility('sub2','none');">HTML Home</a><br>
<a href='../sql_tutorial/site_map.php' onMouseOver="setVisibility('sub3', 'inline');" onMouseOut="setVisibility('sub3','none');">Sql Home</a><br>
<a href='../php_tutorial/site_map.php' onMouseOver="setVisibility('sub4', 'inline');" onMouseOut="setVisibility('sub4','none');">PHP Home</a><br>
<a href='../javascript_tutorial/site_map.php' onMouseOver="setVisibility('sub5', 'inline');" onMouseOut="setVisibility('sub5','none');">JavaScript 
 
Home</a><br>
 
 
<div id="sub1">You are going to plus2net home page</div>
<div id="sub2">Visit html home page</div>
<div id="sub3">SQL home page</div>
<div id="sub4" >You are going to visit PHP home page</div>
<div id="sub5" >JavaScript Home page</div>
 
 
</body>
</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.

Ryo · #2 (**permalink**) 13/03/2010, 09:24

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 originaldiv.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">).

rikqp · #3 (**permalink**) 13/03/2010, 13:24

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