Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Lograr el efecto de twitter

Estas en el tema de Lograr el efecto de twitter en el foro de Frameworks JS en Foros del Web. 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, ...
  #1 (permalink)  
Antiguo 23/04/2012, 14:56
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Lograr el efecto de twitter

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!
  #2 (permalink)  
Antiguo 24/04/2012, 01:15
Avatar de Trublux  
Fecha de Ingreso: octubre-2010
Ubicación: Madrid
Mensajes: 355
Antigüedad: 13 años, 4 meses
Puntos: 48
Respuesta: Lograr el efecto de twitter

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).
__________________
eZ Publish Developer Basic Legacy
eZ Publish Developer Basics (4.4)
Alojamientos rurales en España
  #3 (permalink)  
Antiguo 25/04/2012, 14:49
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años
Puntos: 20
Respuesta: Lograr el efecto de twitter

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
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  2. <style type="text/css">
  3. body {
  4.     background: #FFFFFF;
  5.     font-size:14px;
  6. }
  7. #compartir{
  8.     float:left;
  9.     padding-right:10px;
  10.     font-weight:bold;
  11. }  
  12.  
  13. #iconos_sociales li{
  14.     float:left;
  15.     padding-right:10px;
  16.     list-style-type: none;
  17. }
  18. </style>     
  19. </head>
  20. <script type="text/javascript">
  21. $(document).ready(function() {
  22.     $("#iconos_sociales").hide();
  23.  
  24.     $("#compartir").mouseover(function(){
  25.         $("#iconos_sociales").show();
  26.     }).mouseout(function(){
  27.         $("#iconos_sociales").hide();
  28.     });
  29. });
  30. <div id="compartir">Compartir</div>
  31.     <div id="iconos_sociales"><ul><li>FACEBOOK</li><li>TWITTER</li><li>YOUTUBE</li></ul></div>
  32.  
  33. </body>
  34. </html>

Muchas gracias de antemano!

Etiquetas: efecto, lograr, twitter, botones
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




La zona horaria es GMT -6. Ahora son las 23:58.