Foros del Web » Creando para Internet » CSS »

Eventos CSS para ocultar un div.

Estas en el tema de Eventos CSS para ocultar un div. en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 28/02/2008, 08:24
 
Fecha de Ingreso: septiembre-2004
Mensajes: 191
Antigüedad: 13 años, 3 meses
Puntos: 1
Eventos CSS para ocultar un div.

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 {
    
positionabsolute;
    
border-color#ffffff;
    
background-color#ffffff;
}

.
MenuFlotante li{
    
width:120px;
    
height:20px;
    
background-color#5e5e8b;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size11px;
    
font-weightnormal;
    
color#ffffff;
    
padding-top5px;
    
padding-bottom5px;
    
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
  #2 (permalink)  
Antiguo 28/02/2008, 08:39
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Re: Eventos CSS para ocultar un div.

Hola:

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

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 28/02/2008, 08:40
 
Fecha de Ingreso: septiembre-2004
Mensajes: 191
Antigüedad: 13 años, 3 meses
Puntos: 1
Re: Eventos CSS para ocultar un div.

Cita:
Iniciado por caricatos Ver Mensaje
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????
  #4 (permalink)  
Antiguo 28/02/2008, 12:05
 
Fecha de Ingreso: febrero-2008
Ubicación: Mexicali, BC. Mexico
Mensajes: 53
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eventos CSS para ocultar un div.

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
  #5 (permalink)  
Antiguo 29/02/2008, 07:31
 
Fecha de Ingreso: septiembre-2004
Mensajes: 191
Antigüedad: 13 años, 3 meses
Puntos: 1
Re: Eventos CSS para ocultar un div.

Cita:
Iniciado por Dragoon_SC Ver Mensaje
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 {
    
positionabsolute;
    
border-color#ffffff;
    
background-color#ffffff;
}

.
MenuFlotanteNormal{
    
width:120px;
    
height:20px;
    
background-color#5e5e8b;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size11px;
    
font-weightnormal;
    
color#ffffff;
    
padding-top5px;
    
padding-bottom5px;
    
border-color#ffffff;
}

.
MenuFlotanteSeleccionado{
    
width:120px;
    
height:20px;
    
background-color#e0dde5;
    
font-familyVerdanaArialHelveticasans-serif;
    
font-size11px;
    
font-weightnormal;
    
color#000000;
    
padding-top5px;
    
padding-bottom5px;
    
border-color#ffffff;
    
cursorpointer;


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???
  #6 (permalink)  
Antiguo 04/03/2008, 05:36
 
Fecha de Ingreso: septiembre-2004
Mensajes: 191
Antigüedad: 13 años, 3 meses
Puntos: 1
Re: Eventos CSS para ocultar un div.

alguna idea?
  #7 (permalink)  
Antiguo 04/03/2008, 10:52
 
Fecha de Ingreso: febrero-2008
Ubicación: Mexicali, BC. Mexico
Mensajes: 53
Antigüedad: 9 años, 9 meses
Puntos: 0
Re: Eventos CSS para ocultar un div.

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
  #8 (permalink)  
Antiguo 13/03/2008, 04:18
 
Fecha de Ingreso: septiembre-2004
Mensajes: 191
Antigüedad: 13 años, 3 meses
Puntos: 1
Re: Eventos CSS para ocultar un div.

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.
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

SíEste tema le ha gustado a 2 personas




La zona horaria es GMT -6. Ahora son las 10:51.