इसे दिखाने के लिए एक छिपे हुए तत्व पर होवर करें

Question

क्या कोई तत्व पहले से छिपे हुए तत्व पर होवर करने का कोई तरीका है। मैं अपने होम पेज पर स्टीम अपने तीर नेविगेशन के साथ क्या करता है उसकी नकल करने की कोशिश कर रहा हूं। आपको लगता है कि जब आप पहली बार पृष्ठ पर आते हैं, वहाँ कोई दिखा तीर हैं पर ध्यान देंगे: जब आप ऐसा क्षेत्र है जहां एक तीर होना चाहिए पर होवर

फिर, यह अपने आप में दिखाता है:

मैंने अपने divs को सेट करने का प्रयास किया है जिसमें तीर छवियों को display: none पर रखा गया है और आपने visibility: hidden भी कोशिश की है, लेकिन ऐसा लगता है कि jQuery में होवर या माउसओवर विधियों के साथ काम नहीं करता है। मैंने सोचा होगा कि visibility: hidden इसे काम करेगा, लेकिन ऐसा लगता है कि यह मामला नहीं है। क्या कोई अन्य तरीका है कि मैं शुरुआत से इन divs को छुपा सकता हूं लेकिन फिर भी होवर ईवेंट उन पर काम करने में सक्षम हो सकता है?

Answer 1

सेट यह अस्पष्टता के बजाय शून्य:

$('#blah').hover(function() { 
    $(this).fadeTo(1,1); 
},function() { 
    $(this).fadeTo(1,0); 
}); 

http://jsfiddle.net/mblase75/bzaax/

Answer 2

होवर राज्य पर तत्व की अस्पष्टता को बदलने के लिए .fadeTo jQuery विधि का उपयोग करें।

jQuery साइट एक उदाहरण है, लेकिन कुछ इस तरह jQuery Hover पृष्ठ से

$("element").hover(//On Hover Callback 
        function() {$(this).fadeOut(100);} , 
        //Off Hover Callback 
        function() {$(this).fadeIn(500);}) 

पर्याप्त होना चाहिए।

Answer 3

आप इसे opacity: 0 पर सेट कर सकते हैं।

इसे क्रॉस-ब्राउज़र बनाने के लिए आप शायद इसे jQuery के साथ करना चाहते हैं।

Answer 4

ऐसा करने का एक तरीका वैकल्पिक हिट-टेस्ट div का उपयोग करके है, जैसे कि इसमें कोई सामग्री नहीं है, लेकिन जब उस पर आच्छादित होता है तो "तीर" div दिखाता है। जब "तीर" div (या हिट-टेस्ट div) निकल जाता है, तो "तीर" div एक बार फिर छुपाया जाएगा।

वैकल्पिक रूप से, आप हिट-टेस्ट और "तीर" के लिए एक ही div का उपयोग कर सकते हैं, जैसे कि पृष्ठभूमि छवि div के दृश्य तत्वों के लिए उपयोग की जाती है। जब ढक लिया जाता है, तो आप छवि के ऑफ़सेट को उस स्थिति पर सेट करने के निर्देश दे सकते हैं जो "तीर" दिखाएगा। बाहर निकलने पर, आप पृष्ठभूमि की ऑफ़सेट को उस स्थिति में सेट करेंगे जहां तीर छवि अब दिखाई नहीं देगी।

और, अंत में, यदि सामग्री हमेशा हिट-टेस्ट एरिया के समान स्थिति में होगी, तो आप div की अस्पष्टता शून्य पर सेट कर सकते हैं, और तदनुसार टॉगल कर सकते हैं।

Answer 5

आप (वास्तव में mouseenter और mouseleave) 0 पर तत्व यही कारण है कि उन्हें मंडराना घटनाओं प्राप्त करने की अनुमति होगी की अस्पष्टता सेट कर सकते हैं, लेकिन एक व्यावहारिक मामले के रूप में, उन्हें उपयोगकर्ताओं के लिए अदृश्य बनाते हैं।

Answer 6

आप एक अदृश्य तत्व या एक अनदेखा तत्व पर होवर नहीं कर सकते हैं। आप एक दृश्य तत्व पर होवर कर सकते हैं और उसके बाद एक अलग पहले छुपा तत्व दिखाने के लिए इसका उपयोग कर सकते हैं। या आप एक पारदर्शी तत्व पर होवर कर सकते हैं और इसे अपारदर्शी बना सकते हैं।

Here is an example of the opacity technique using just CSS, it would also work with jQuery's hover.

सीएसएस:

#it { 
    opacity: 0; 
    width: 500px; 
    height:500px; 
} 

#it:hover { 
    opacity: 1; 
} 

Here is an example of showing one element when another is hovered over:

HTML:

<div id="me">Hover over me to display something else</div> 
<div id="else">Something else</div> 

jQuery:

$("#me").hover(function(){ 
    $("#else").show(); 
},function(){ 
    $("#else").hide(); 
});