jQuery

Question

का उपयोग कर स्टैक ओवरफ़्लो की तरह होवरिंग टैग्स स्टैक ओवरफ्लो कैसे एक प्रश्न के टैग पर होवरिंग प्रभाव करता है? Jquery का उपयोग कर ऐसा कैसे करें?

संपादित करें: ऐसा नहीं है कि माउसओवर मैं एक साधारण मंडराना प्रभाव के लिए Add Jquery to favorite tags

Answer 1

यह काम करना चाहिए।

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

मैं इसे लगभग ठीक तरह से stackoverflow करता कोडित है। मैंने @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> 

---

सीएसएस:

.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

दिखा सबमेनू चाहते क्या तुम सच में css का उपयोग करना चाहिए, जैसे

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

उदाहरण के लिए

।

यदि यह jQuery में होना चाहिए, ऐसा लगता है जैसे

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

Answer 3

मैं दोनों के साथ सहमत बस पर जोर देने का प्रयास करेगा, तो आप पूरी तरह से उपयोग कर सकते हैं: सीएसएस में मंडराना, यदि आप तो IE6 ब्राउज़र नए लक्षित कर रहे हैं , आईई 6 के साथ काम नहीं करेगा: होवर जब तक यह एक लिंक न हो।