छिपे हुए div

दिखाने के लिए jQuery माउसओवर लिंक मैं निम्नलिखित छवि की तरह extratorrent साइट पर माउसओवर घटना में आया था।छिपे हुए div

alt text http://img3.imageshack.us/img3/4516/usercommment999.jpg

जब आप उपयोगकर्ता नाम लिंक पर माउस को हॉवर, यह एक छिपा div को दर्शाता है। बहुत साफ और चिकनाई।

मैं jQuery के लिए नया हूं। क्या कोई मुझे दिखा सकता है कि ऐसा करने के लिए सही रास्ते पर कैसे शुरुआत करें? धन्यवाद।

अद्यतन 1:

मैं की तरह कुछ लिखा परिणाम प्राप्त करने का प्रयास के बाद। समस्या यह है कि जब मैं माउस को लिंक से बाहर रखता हूं तो div नहीं रहता है, यह तुरंत गायब हो जाता है।

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(document).ready(function() 
     { 


    $("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); }); 
    $("#show_div").mouseout(function() { $("#hello").css('visibility','hidden'); }); 


     }); 
     </script> 

    </head> 

    <body> 

    <a id="show_div" href="#">Link text</a> 
    <div id="hello" style="visibility:hidden;"> 
     <ul> 
     <li>Coffee</li> 
     <li>Tea</li> 
     <li>Milk</li> 
    </ul> 
    </div> 


    </body> 
    </html>

डिव पर माउस के दौरान डीवी रहने के लिए क्या करना है?

स्रोत

2010-06-26 Narazana

जब लिंक टेक्स्ट को माउसओवर करते हैं, तो आप दृश्य को "हैलो" की दृश्यता सेट करते हैं। फिर माउसओवर पर div "हैलो", आप दृश्य को "हैलो" दृश्यता भी सेट करते हैं। Div "हैलो" के माउसआउट पर आप अपनी दृश्यता को "छुपा" पर सेट करते हैं। कुछ इस तरह:

$("#show_div").mouseover(function() { $("#hello").css('visibility','visible'); }); 
$("#hello").mouseover(function() { $("#hello").css('visibility','visible'); }); 
$("#hello").mouseout(function() { $("#hello").css('visibility','hidden'); });

स्रोत

2010-06-26 08:04:14

तो, इसमें 3 कदम होते हैं..धन्यवाद। – Narazana

मुझे इस तरह कुछ लागू करने की आवश्यकता है और #show_div पर माउसआउट जोड़ा गया है। $ ("# show_div")। माउसआउट (फ़ंक्शन() {$ ("# हैलो")। देरी ("तेज़")। सीएसएस ('दृश्यता', 'छुपा');}); विचार यह था कि सूची आइटम देरी के बाद दूर जाना चाहिए, लेकिन यह काम नहीं करता है। यदि मैं देरी करता हूं, तो जैसे ही माउस लिंक से दूर चला जाता है, सूची आइटम दूर हो जाते हैं। देरी के साथ, सूची आइटम कभी नहीं चले जाते हैं। कोई विचार क्यों? धन्यवाद!!! – AggieMan

मैंने इसे थोड़ा और देखा और यह पता चला कि इसे काम करने के लिए, मुझे यह करना होगा: $ ("# show_div")। माउसआउट (फ़ंक्शन() {setTimeout (function() {$ (" #hello ")। सीएसएस ('दृश्यता', 'छिपा');}, 200);}); – AggieMan

आप .hover समारोह इस्तेमाल कर सकते हैं:

$(function() { 
    $('#divOne').hover(function() { 
     $('#divTwo').show(); 
    }, function() { 
     $('#divTwo').hide(); 
    }); 
});

जहां दो divs है:

<div id="divOne">div one</div> 
<div id="divTwo" style="display: none;">div two</div>

अद्यतन:

टिप्पणी अनुभाग दूसरी div में उल्लेख किया है माउस गायब हो जाता है अगर गायब हो जाएगा। many plugins out there हैं जो आपको वांछित व्यवहार प्राप्त करने की अनुमति देंगे। This one विशेष रूप से अच्छा लग रहा है।

स्रोत

2010-06-26 07:30:52

समस्या यह है कि यदि उपयोगकर्ता उन्हें माउस को ताजा दिखाए गए 'divTwo' में ले जाता है, तो यह उनके नीचे से गायब हो जाएगा क्योंकि माउस' divOne' छोड़ देता है। एक आदर्श यूएक्स नहीं है। –

@ टीजे। पाउडर, बहुत अच्छी टिप्पणी। –

डाउनवोट गंभीर लगता है ... –

एक साधारण HTML के साथ

<div class="div1">Hover me</div> 
<div class="div2" style="display: none">Hi, there</div>

जब div1 आप div2 दिखाने के ऊपर से गुज़र रहा है, और छिपाने यह केवल के बाद उपयोगकर्ता इसके अंदर हो जाते हैं और फिर बाहर निकलें:

<script type="text/javascript"> 
$('.div1').hover(function() {$('.div2').show()}); 
$('.div2').hover(function() {}, function() {$('.div2').hide()});  
</script>

यह एक त्वरित है, गैर इष्टतम समाधान, लेकिन काम करेगा भले ही दो div निकट न हों।

स्रोत

2010-06-26 07:48:07 Iacopo

उपयोग इस

$ (दस्तावेज़) .on ("पर क्लिक करें", "# test-तत्व", समारोह() {});

स्रोत

2015-08-19 14:30:53

छिपे हुए div

उत्तर

संबंधित मुद्दे