Question

说我有一个带有链接的div。当我将鼠标悬停在它上面时，我希望另一个div在其上方淡入一些内容，然后在鼠标悬停时逐渐消失。

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

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

Answer 3

我会使用jquery及其fadeIn和fadeOut函数以及hover

Answer 4

为此，您需要使用JQuery特别是.hover()事件。一旦你掌握了它，你会发现做这样的跨浏览器的任务是微不足道的。

悬停Div系统

4 个答案: