懸停Div系統

Question

說我有一個鏈接在它的div。當我將鼠標懸停在它上面時，我希望另一個div在其上面淡入一些內容，然後在鼠標懸停時消失。

例子在這裏找到： http://bit.ly/c59sT4

Answer 1

可以使用.hover()和the fading functions做一些可重複使用的，就像這樣：

$(".container").hover(function() { 
    $(this).find(".hover").fadeIn(); 
}, function() { 
    $(this).find(".hover").fadeOut(); 
}); 

例如，這裏的演示標記，雖然<div>元素可以包含任何內容：

<div class="container"> 
    <div class="hover"> 
     Content Here 
    </div> 
    <a href="#">Link</a> 
</div> 

然後通過CSS，你只需將其放在<div>的內部，並給它相同的大小，如下所示：

.container, .hover { width: 100px; height: 300px; background: white; } 
.hover { position: absolute; display: none; } 

You can give it a try here。

Answer 2

我會使用jQuery和其fadeIn和fadeOut功能，結合hover

Answer 3

對於您需要使用特別的JQuery事件.hover()。一旦你掌握了它，你會發現做這種工作跨瀏覽器的任務是微不足道的。

Answer 4

HTML：

<div id="container"> 
    <a href="#" id="link">Link</a> 
    <div id="divtofadein">some content here</div> 
</div> 

JS：

$(function(){ 
$("#divtofadein").mouseout(function(){ 
    $(this).fadeOut(); 
}) 
    .hide(); 

$("#link").click(function(){ 
    $("#divtofadein").fadeIn(); 
}); 
}); 

CSS：

#container { 
position: relative; 
width: 100px; 
height: 200px; 
} 

#link { 
position: absolute; 
top: 0px; 
left: 0px; 
} 

#divtofadein { 
position: absolute; 
top: 0px; 
left: 0px; 
width: 100px; 
height: 200px; 
background: #FFF; 
}