Eventos CSS para ocultar un div.

[sanmi69]

Hola. tengo el siguiente porblema y no soy capaz de solucionarlo, ya que el css no e slo mio jeej.


tengo el siguiente div:

Código PHP:

  <div id="idMenuFlotante" class="MenuFlotante" style="display:none">
<ul>
    <li>
        <a>Finalizar Carga</a>
    </li>
    <li>
        <a>Eliminar Carga</a>
    </li>
</ul>
</div> 
   

y en el CSS lo siguiente:

Código PHP:

  .MenuFlotante {
    position: absolute;
    border-color: #ffffff;
    background-color: #ffffff;
}

.MenuFlotante li{
    width:120px;
    height:20px;
    background-color: #5e5e8b;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: #ffffff;
} 
   

El menu por defecto esta oculto. Se muestra mediante javascript.

Lo que kiero conseguir es cambiar el color de fondo del li cuando el raton este encima.
Y que cunado el raton salga del menu este se oculte. Seria algo asi, solo que no funciona:

Código PHP:

  .MenuFlotante li:hover{    
    background-color: #fff000;    
}
.MenuFlotante:out{    
     display:none;
 } 
   

gracias

[caricatos]

Hola:

:out no existe... simplemente es cuando no es :hover... o sea sin :hover...

No creo que sea conveniente mezclar comportamientos (eventos) javascript...

Saludos

[sanmi69]

Iniciado por caricatos

Hola:

:out no existe... simplemente es cuando no es :hover... o sea sin :hover...

No creo que sea conveniente mezclar comportamientos (eventos) javascript...

Saludos

pues alguna manera de hacerlo????

[Dragoon_SC]

bueno si dices que quieres cambiarlo puedes intentar algo asi:

<script>
function cambiaColor(elemento)
{
elemento.style.backColor = "Red";
}
</script>

<ul>
<li id="li1" onmouseover="javascript: cambiaColor(this)">Menu1</li>
<li id="li2">Menu2</li>
<li id="li3">Menu3</li>
</ul>

No me acuerdo muy bien de la sintaxis del style del javascript puedes buscarla y pues con eso cambiarias lo que quieres y podrias tner un onmouseout para restablecerlo y ya.
Espero y eso ayude

[sanmi69]

Iniciado por Dragoon_SC

bueno si dices que quieres cambiarlo puedes intentar algo asi:

<script>
function cambiaColor(elemento)
{
elemento.style.backColor = "Red";
}
</script>

<ul>
<li id="li1" onmouseover="javascript: cambiaColor(this)">Menu1</li>
<li id="li2">Menu2</li>
<li id="li3">Menu3</li>
</ul>

No me acuerdo muy bien de la sintaxis del style del javascript puedes buscarla y pues con eso cambiarias lo que quieres y podrias tner un onmouseout para restablecerlo y ya.
Espero y eso ayude

gracias, si va a ser mejor, me hice un poco lio con los css (no soy diseñador asik se lo basico) y al final era mas facil que todo esto:

Código PHP:

  <div id="idMenu" class="MenuFlotante" style="display:none">
<ul onmouseout="javascript:$('idMenu').style.display='none';">
    <li class="MenuFlotanteNormal" onclick="fncFinalizarCarga();" onmouseover="this.className='MenuFlotanteSeleccionado';" onmouseout="this.className='MenuFlotanteNormal';">
        Finalizar Carga
    </li>
    <li class="MenuFlotanteNormal" onclick="fncEliminarCarga();" onmouseover="this.className='MenuFlotanteSeleccionado';" onmouseout="this.className='MenuFlotanteNormal';">
        Eliminar Carga
    </li>
</ul>
</div> 
   

Código PHP:

  .MenuFlotante {
    position: absolute;
    border-color: #ffffff;
    background-color: #ffffff;
}

.MenuFlotanteNormal{
    width:120px;
    height:20px;
    background-color: #5e5e8b;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #ffffff;
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: #ffffff;
}

.MenuFlotanteSeleccionado{
    width:120px;
    height:20px;
    background-color: #e0dde5;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #000000;
    padding-top: 5px;
    padding-bottom: 5px;
    border-color: #ffffff;
    cursor: pointer;
} 
   

Ahora tengo un problema con el evento onmouseout. Da igual si se lo pongo al div o se lo pongo al ul.
La cuestion esq al mover el raton de un li al otro li, como hay un borde un pixel en blanco entre medias, me oculta el menu.

Alguna opcion para que no ocurra esto???

[sanmi69]

alguna idea?

[Dragoon_SC]

pues no creo que haya problema alguno no mas que ya no vas a tener la opcion de mandarle el id del elemento del <li>.
tendrias que tener todos los id's y restablecerlos

<script>
funtcion restablece()
{
document.getElementById('li1').style.backColor = "black";
document.getElementById('li2').style.backColor = "black";
document.getElementById('li3').style.backColor = "black";
}
</script>

restablecer todos al salir del div seria la opcion como lo veo

[sanmi69]

Al final he utilizado los menis COOLjsMenu
http://javascript.cooldev.com/scripts/coolmenu/
La aplicacion utiliza para los menus dicha biblioteca, y dispone de la posibilidad de utilizar menus popup.

Aunk la solucion sin utilizar dicha biblioteta es utilizar el metodo setTimeOut.
De esta manera siempre esperaria 1 segundo (o lo que le pases por parametro) antes de ocultarse, en caso de q el raton no siguiera encuima de algun menu.