javascript - 如何创建整个 可点击，然后在鼠标悬停时在顶部显示框？

Question

我有一个列表，里面有一些细节。我喜欢做的是让每个列表都可以点击，然后在鼠标悬停时，列表顶部的框将显示其中包含更多信息。

这是列表:

<ul>
   <li>
      <h3>Title</h3>
      <p>Description</p>
   </li>
</ul>

然后在鼠标悬停时，我想在它上面叠加另一个框/div(当他们点击时，会转到另一个页面):

<div>
   <h3>Title</h3>
   <p>More description ... </p>
</div>

这个效果的一个例子在这个网站上:

http://www.hungrygowhere.com/ (DBS 特别放纵部分)

我不知道正在使用什么脚本。有人知道吗？

Answer 1

看看这个!

DEMO

$('.box').hover(function() {
    $(this).children('.description').stop().fadeTo(300, 0.7);
},function(){
     $(this).children('.description').stop().fadeTo(300,0);
});

$(".description").click(function() {
    window.location = $(this).find("a:last").attr("href");
    return false;
});

编辑

添加了 .stop() 以防止动画在重复的鼠标悬停时冒泡。