Làm cách nào để che phủ div/hộp khi di chuột qua?

Question

Tôi có một liên kết và khi người dùng di chuột qua nó, nó sẽ hiển thị một hộp (div) dưới liên kết. Hộp nên phủ lên bất cứ thứ gì ở dưới nó. Làm thế nào tôi có thể làm điều đó bằng cách sử dụng css hoặc javascript?

Answer 1

Tôi đã tạo một sample here. Bạn có thể sửa đổi từ đó cho phù hợp với nhu cầu của bạn.

<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

Bạn có một div được định vị hoàn toàn bị ẩn và con của liên kết. Sau đó, khi bạn di chuột qua liên kết, bạn phải bỏ ẩn div. Tôi không thể cung cấp CSS đầy đủ và tôi chưa thử nghiệm điều này, nhưng điều đó sẽ giúp bạn bắt đầu. Bạn sẽ phải chơi xung quanh với vị trí và kích cỡ.

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

Đây sẽ là cách thuần CSS.

Answer 3

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