माउसओवर पर div/box को ओवरले कैसे करें?

Question

मेरे पास एक लिंक है और जब उपयोगकर्ता इसके ऊपर माउस होवर करता है, तो उसे लिंक के नीचे एक बॉक्स (div) प्रदर्शित करना चाहिए। बॉक्स को इसके नीचे जो भी हो, ओवरले करना चाहिए। मैं इसे सीएसएस या जावास्क्रिप्ट का उपयोग करके कैसे कर सकता हूं?

Answer 1

मैंने sample here बनाया है। आप अपनी आवश्यकताओं के अनुरूप वहां से संशोधित कर सकते हैं।

<div class="hover">Hover here</div> 
<div class="overlay" style="visibility:hidden"> 
<img src="http://www.google.com/images/logos/ps_logo2.png" alt="google" /> 
</div>​ 


$(document).ready(function() 
{ 
    $("div.hover").mouseover(function() 
    { 
    $(this).css('cursor', 'pointer'); 
    $("div.overlay").css('visibility','visible'); 
    }); 
    $("div.hover").mouseout(function() 
    { 
    $(this).css('cursor', 'default'); 
    $("div.overlay").css('visibility','hidden'); 
    }); 
}); 

Answer 2

आपके पास एक पूरी तरह से स्थित div है जो छुपा हुआ है, और लिंक का एक बच्चा है। फिर, जब आप लिंक पर होवर करते हैं, तो आपको div को अनदेखा करना चाहिए। मैं पूर्ण सीएसएस प्रदान नहीं कर सकता, और मैंने इसका परीक्षण नहीं किया है, लेकिन आपको इसे शुरू करना चाहिए। आपको स्थिति और आकार के साथ खेलना होगा।

<a href="#" class="special">Somewhere<div class="desc">This is hidden.</div></a> 

a.special { position:relative; } 
a.special div.desc { background-color:white; display:none; position:absolute; z-index:100; } 
a.special:hover div.desc { display:block; } 

यह शुद्ध-सीएसएस तरीका होगा।

Answer 3

$("#id").mouseover(function(){ 
    $("a[rel='#petrol']").overlay().load(); 
}); 
$("#id").mouseout(function(){ 
    $("a[rel='#petrol']").overlay().close(); 
});