como se hace esto?=

rufus · #1 (**permalink**) 27/05/2014, 08:16

como se hace lo siguiente?:

tengo un registro en una tabla y con una funcion lo pinto en un <ul><li> como ago con javascript para que este <li> al pasarle el raton por encima me aparezcan varias opciones como editar, borrar...... y que cuando el raton salga se quede en el estado anterior???

Italico76 · #2 (**permalink**) 27/05/2014, 08:19

Necesitas registrar los eventos onMouseOver() y onMouseOut()

Con el primero llamas a funa funcion que haga un div visible y con el segundo invisible

Consulta la diferencia en css entre visibility y display a ver cual te sirve mas:

http://www.w3schools.com/css/css_display_visibility.asp

mnocturno · #3 (**permalink**) 27/05/2014, 08:30

Más o menos sería:

Código HTML:

Ver original<ul>
  <li id="mili">
     <div id="midiv"></div>
  </li>
</ul>

y luego una función en javascript:

Código Javascript:

Ver originalfunction eventos() {
   elemento=document.getElementById("mili");
   elemento.onmouseover= function() {
           document.getElementById("midiv").style.display="block";
   }
 
   elemento.onmouseout=function() {
           document.getElementById("midiv").sytle.display="none";
   }
}

La función eventos la llamas desde window.onload.

rufus · #4 (**permalink**) 27/05/2014, 08:59

mnocturno no me funciona tu codigo lo tengo asi

<body onload="eventos()">

Código Javascript:

Ver original<script>
        function eventos() 
        {
               elemento=document.getElementById("listadoproyecto");
               elemento.onmouseover= function() 
               {
                       document.getElementById("midiv").style.display="block";
               }
             
               elemento.onmouseout=function()
               {
                       document.getElement.ById("midiv").style.display="none";
               }
        }
 
 
</script>

y la funcion php de donde saco la lista<li> es:

Código PHP:

Ver originalpublic static function coger_accion()
    {
        
        /*$mensaje= "accion creada con exito";
        $pro = "SELECT id_proyecto FROM proyecto";
        $pro .= " WHERE id_usuario='{$id_usuario}' ";
        $pro .= " ORDER BY id_proyecto ASC " ;
        $pro .=" LIMIT 1 ";
*/
        /*$resultadopro = mysql_query($pro);
        //var_dump($resultado);
        $rs=mysql_fetch_array($resultadopro);*/
 
        //$proyect =  $rs["id_proyecto"];
         global $bd;
        $id_usuario = $_SESSION["usuario_id"];
    
        $sql = "SELECT accionsiguiente FROM acciones_siguientes ";
        $sql .= " WHERE id_usuario='{$id_usuario}' ";
        /*var_dump($sql);
        exit;*/
        $resultado = mysql_query($sql);
    
        while($row = mysql_fetch_row($resultado))
        {
 
                echo "<li id='listadoproyecto'>" .$row[0] ." <div id='midiv'></div></li> </br>";
    
        }   
        
 
    }

rufus · #5 (**permalink**) 27/05/2014, 09:00

por defecto me carga el div en las listas...

rufus · #6 (**permalink**) 27/05/2014, 09:30

ahora medio me funciona le he puesto en el css al midiv un display : none y cuando cargo la pagina y me pongo con el raton encima del primer <li> se me aparece el div pero se queda fijo luego no desaparece. y esto solo me funciona con el primer <li> con el resto no funciona el codigo...

mnocturno · #7 (**permalink**) 27/05/2014, 11:27

Ummm, bueno yo de PHP, de momento poco tirando a nada, pero por lo que entiendo, vas creando los li a partir de una base de datos SQL.

Y creo entender que por cada fila de li, también se asigna el id="midiv", luego se está repitiendo el id, cosa que no puede ser. De ahí que sólo te medio funcione el primero, el resto de divs se quedan sin id.

De lo que no desaparece el div primero al quitar el ratón, mira en elemento.onmouseout que hay un punto en document.getElement.ById, que lo puse yo mal al poner el código. Quita ese punto para que quede document.getElementById.

Así te tendría que funcionar el primer li al poner el ratón y al quitarlo.

Para el resto de li deja que me lo piense un ratito. Aunque ya te digo que de PHP...