Lograr el efecto de twitter

neodani · #1 (**permalink**) 23/04/2012, 14:56

Buenas,

¿Sabéis cómo puedo lograr el efecto de twitter que aparece cuando te pones encima de un tweet, que salen los botones "Responder, retwittear, favorito, abrir"

Quiero hacer algo parecido para un botón que se llama compartir, que al pasar por encima desaparezca el texto "compartir" y salgan los iconos de las redes sociales en su lugar. Estos iconos los tengo en formato lista <ul><li>....</li><li>...</li></ul>

Muchas gracias de antemano!

Trublux · #2 (**permalink**) 24/04/2012, 01:15

Con la propiedad ":hover" dándole un display none/block ó line de CSS o con fadeIn/fadeOut de JQuery (o cuqalquier otra que sea más o menos lo mismo).

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!