jQuery를 사용하여 스택 오버플로와 같은 태그 호버

Question

stackoverflow는 질문의 태그에 호버링 효과를 어떻게 발생합니까? jquery를 사용하여 동일한 작업을 수행하는 방법?

편집 : 하지 난 간단한 호버 효과를 Add Jquery to favorite tags

Answer 1

이 작업을 수행해야합니다.

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

나는 거의 정확하게 방식에 유래가하는 그것을 코딩했다. 나는 이미 @Reigel이 만든 버튼을 만들었습니다.

희망이 도움이됩니다. 건배 :

EDIT : 요청시 jsFiddle의 답변도 추가되었습니다.

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(); 
}); 

그냥 간단한 CSS와 함께 할 수

Answer 2

를 보여주는 하위 메뉴를 원하는 마우스 오버가 정말 예를 들어

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

처럼 css를 사용해야합니다. 그것은 이 jQuery를에 있어야하는 경우

, 그것은 그냥 강조하기 위해 모두 동의

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

Answer 3

과 같을 것이다, 당신은 절대적으로 사용할 수 있습니다 CSS에 가져가, 당신은 IE6 다음 브라우저 최신을 대상으로하는 경우 IE6는 링크가 아닌 한 마우스를 올리면 작동하지 않습니다.