Etiquetas que flotan como Stack Overflow utilizando jQuery

Question

¿Cómo hace stackoverflow ese efecto de desplazamiento sobre la etiqueta de una pregunta? ¿Cómo hacer lo mismo usando jquery?

EDIT: No es que quiero pasar el ratón el submenú mostrando Add Jquery to favorite tags

Answer 1

Esto debería hacer el trabajo.

http://jsfiddle.net/5GD6r/4/

He codificado casi exactamente de la manera stackoverflow hace. Construí sobre el botón ya creado por @Reigel.

Espero que esto ayude. Saludos :)

EDIT: Se agregó la respuesta aquí también de jsFiddle bajo petición.

HTML:

<a href="#" class="post-tag" title="show questions tagged 'mousehover'" rel="tag">Ruby-on-Rails</a> 

<a href="#" class="post-tag" title="show questions tagged 'mousehover'" rel="tag">JQuery</a> 

<a href="#" class="post-tag" title="show questions tagged 'mousehover'" rel="tag">CSS</a> 


<div class="mouseoverHoverBox"> 
    <span class="pointer"> 
     <span class="plusminus">+</span> 
     <span class="addRemove">Add </span> 
     <span class="insert"></span> 
     <span class="fromTo"> To </span> 
     <span>Interesting tags</span> 
    </span> 
    <br /> 
    <span class="pointer"> 
     <span class="plusminus">+</span> 
     <span class="addRemove">Add</span> 
     <span class="insert"></span> 
     <span class="fromTo"> To </span> 
     <span>Ignored tags</span> 
    </span> 
</div> 

---

CSS:

.post-tag { 
    position:relative; 
    background-color: #E0EAF1; 
    border-bottom: 1px solid #3E6D8E; 
    border-right: 1px solid #7F9FB6; 
    color: #3E6D8E; 
    font-size: 90%; 
    line-height: 2.4; 
    margin: 2px 0px 2px 0px; 
    padding: 3px 4px; 
    text-decoration: none; 
    white-space: nowrap; 
    } 

.post-tag:hover { 
    position:relative; 
    background-color:#3E6D8E; 
    color:#E0EAF1; 
    border-bottom:1px solid #37607D; 
    border-right:1px solid #37607D; 
    text-decoration:none; 
} 

.mouseoverHoverBox { 
    position:relative; 
    top: -6px; 
    border: 2px ridge #CCC; 
    padding: 10px; 
    width: 250px; 
} 

.plusminus { 
    color: #E45C0E; 
} 

.pointer { 
    cursor: pointer; 
    width: 100%; 
    height: 100%; 
    color: #3E6D8E; 
} 

---

javascript:

$('.mouseoverHoverBox').hide(); 

$('.post-tag').live('mouseover',function(e){ 
    var x = $(this).offset(); 
    $('.mouseoverHoverBox').css('left',x.left-10); 
    $('.insert').html(' <b>'+$(this).text() + '</b> '); 
    $('.mouseoverHoverBox').slideDown(); 
}); 

$('.pointer').live('mouseover mouseout', function(e){ 
    if(e.type=="mouseover") { 
     $(this).css('text-decoration','underline'); 
    }else if(e.type="mouseout") { 
     $(this).css('text-decoration','none'); 
    } 
}); 

$('.pointer').toggle(function() { 
    $(this).find('.plusminus').text('x '); 
    $(this).find('.addRemove').text('Remove '); 
    $(this).find('.fromTo').text('From'); 
}, function() { 
    $(this).find('.plusminus').text('+ '); 
    $(this).find('.addRemove').text('Add '); 
    $(this).find('.fromTo').text('To'); 
}); 

$('.mouseoverHoverBox').mouseleave(function(){ 
    $(this).hide(); 
}); 

Answer 2

Para un simple efecto de la libración que realmente debe utilizar css, como

a.hover:hover { 
    background-color: #ff0000; 
} 

por ejemplo.

Si debe estar en jQuery, se vería como

$('a.myanchorclass').hover(function(){ 
    $(this).css('background-color', '#ff0000'); 
}, function(){ 
    $(this).css('background-color', '#000000'); 
}); 

Answer 3

Estoy de acuerdo con ambos a destacar, a pesar de todo puede utilizar el: flotar en el CSS, si se dirigen a nuevos navegadores entonces IE6 , IE6 no funcionará con: hover a menos que sea un enlace.