Mouseover'da div/box nasıl açılır?

Question

Bir bağlantım var ve kullanıcı fareyi üzerine getirdiğinde, bağlantı altında bir kutu (div) göstermelidir. Kutu, altında ne varsa onu kaplamalıdır. Bunu css veya javascript kullanarak nasıl yapabilirim?

Answer 1

sample here'u oluşturdum. İhtiyaçlarınıza uyacak şekilde buradan değişiklik yapabilirsiniz. herhangi javascript gerektirmez olarak

<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

Gizlenmiş ve sitenin bir alt öğesi olan tamamen gizli bir div var. Ardından, bağlantının üzerine geldiğinizde div'u göstermelisiniz. Tam CSS sağlayamıyorum ve bunu test etmedim, ancak başlamanıza yardımcı olacak. Konumlandırma ve boyutları ile oynamak zorundasınız.

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

Bu, saf CSS yolu olabilir.

Answer 3

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