Jak nakładać div/box na mouseover?

Question

Mam łącze i gdy użytkownik najedzie myszą na niego, powinien wyświetlić pole (div) pod linkiem. Skrzynka powinna pokrywać wszystko, co jest pod nią. Jak mogę to zrobić za pomocą css lub javascript?

Answer 1

Utworzono sample here. Możesz modyfikować stamtąd, aby dopasować się do twoich potrzeb.

<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

Masz ukryty div z pozycją bezwzględną i dziecko z linku. Następnie, gdy umieścisz kursor nad linkiem, powinieneś odkryć element div. Nie mogę podać pełnego CSS, a tego nie przetestowałem, ale to powinno ci wystarczyć. Będziesz musiał się bawić z pozycjonowaniem i rozmiarami.

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

To byłby czysty sposób CSS.

Answer 3

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