Foros del Web - Ver Mensaje Individual

neodani · #3 (**permalink**) 25/04/2012, 14:49

Hola,

Consigo ocultar o mostrar elementos cuando paso por encima del botón compartir, pero el problema es que a la que muevo el cursor fuera del botón compartir desaparecen los iconos sociales.

Me interesa que desaparezca la palabra compartir y que lo que se muestre sean los iconos sociales, pero claro, que pueda moverme por ellos, y que si no estoy en la capa de los iconos sociales que vuelva a aparecer el texto compartir.

¿Sabéis como puedo conseguirlo?

Este es mi código

Código HTML:

Ver original<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<style type="text/css">
body {
    background: #FFFFFF;
    font-size:14px;
}
#compartir{
    float:left;
    padding-right:10px;
    font-weight:bold;
}   
 
#iconos_sociales li{
    float:left;
    padding-right:10px;
    list-style-type: none;
}
</style>      
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
    $("#iconos_sociales").hide();
 
    $("#compartir").mouseover(function(){
        $("#iconos_sociales").show();
    }).mouseout(function(){
        $("#iconos_sociales").hide();
    });
});
</script>
<div id="compartir">Compartir</div>
    <div id="iconos_sociales"><ul><li>FACEBOOK</li><li>TWITTER</li><li>YOUTUBE</li></ul></div>
 
</body>
</html>

Muchas gracias de antemano!