Thẻ lơ lửng như Stack Overflow bằng cách sử dụng jQuery

Question

Stackoverflow có tác dụng lơ lửng như thế nào trên thẻ của câu hỏi? Làm thế nào để làm tương tự bằng cách sử dụng jquery?

EDIT: Không phải là mouseover tôi muốn các menu con hiện Add Jquery to favorite tags

Answer 1

Điều này nên thực hiện công việc.

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

Tôi đã mã hoá nó gần như chính xác đường đi stackoverflow làm. Tôi xây dựng trên nút đã được tạo bởi @Reigel.

Hy vọng điều này sẽ hữu ích. Chúc mừng :)

EDIT: Đã thêm câu trả lời ở đây quá từ jsFiddle theo yêu cầu.

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

Đối với một hiệu ứng di chuột đơn giản, bạn thực sự nên sử dụng css, như

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

ví dụ.

Nếu nó phải được trong jQuery, nó sẽ trông như

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

Answer 3

Tôi đồng ý với cả hai chỉ để nhấn mạnh, bạn hoàn toàn có thể sử dụng: hover trong CSS, nếu bạn đang nhắm mục tiêu các trình duyệt mới hơn thì IE6 , IE6 sẽ không hoạt động với: di chuột trừ khi đó là một liên kết.