Balises survolant Stack Overflow à l'aide de jQuery

Question

Comment stackoverflow effectue-t-il cet effet planant sur une balise d'une question? Comment faire la même chose en utilisant jquery?

EDIT: Non pas que je veux mouseover le sous-menu montrant Add Jquery to favorite tags

Answer 1

Cela devrait faire le travail.

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

Je l'ai codé presque exactement la façon stackoverflow fait. J'ai construit sur le bouton déjà créé par @Reigel.

Espérons que cela aide. Salutations :)

EDIT: Ajouté la réponse ici aussi de jsFiddle sur demande.

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

Pour un simple effet de vol stationnaire vous devriez vraiment utiliser css, comme

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

par exemple.

Si elle doit en jQuery, il ressemblerait

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

Answer 3

Je suis d'accord avec les deux juste pour souligner, vous ne pouvez absolument utiliser: hover en CSS, si vous ciblez les navigateurs plus récents alors IE6 , IE6 ne fonctionnera pas avec: hover à moins que ce soit un lien.