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