Javascript 如何创建整个<；李>；鼠标悬停时可单击然后在顶部显示框？

我有一个清单，里面有一些细节。我喜欢做的是让每个列表都可以点击，然后当鼠标移到上面时，列表顶部的一个框将显示包含更多信息的框

名单如下：

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

标题
描述

然后，在鼠标上方，我喜欢在其上方叠加另一个框/div（当他们单击时，将转到另一个页面）：

标题
更多描述

这种影响的一个例子是在这个网站上：

（星展银行特别宽免组）

---

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

对html进行一些修改后，就可以使用jQuery的

slideToggle（）

来显示和隐藏

的不同元素

HTML

<ul>
    <li>
        <div class="one">
            <h3>Title</h3>
            <p>Description</p>
        </div>
        <div class="two">
            <h3>Title</h3>
            <p> asd asd asd as dasd More description ... </p>
        </div>

    </li>
</ul>

检查中的工作示例，对html进行一些修改，然后可以使用jQuery的
slideToggle（）
显示和隐藏
中的不同元素

HTML

<ul>
    <li>
        <div class="one">
            <h3>Title</h3>
            <p>Description</p>
        </div>
        <div class="two">
            <h3>Title</h3>
            <p> asd asd asd as dasd More description ... </p>
        </div>

    </li>
</ul>

查看上的工作示例看看这个

编辑

添加了
.stop（）
，以防止动画在重复的鼠标上冒泡。
看看这个

编辑

添加了
.stop（）
，以防止动画在重复鼠标上冒泡。
谢谢。但是你知道如何使整个
成为一个可点击的区域吗？@catandmouse但是如果你在首字母
li
上加上一个div。。。为什么你要麻烦自己让
li
可以点击？@roXon:列表区域有点大，所以我希望整个东西都可以点击。描述可以长也可以短。如果短，那么在叠加的div的底部有一个很大的空间。@catandmouse看我的答案！谢谢但是你知道如何使整个
成为一个可点击的区域吗？@catandmouse但是如果你在首字母
li
上加上一个div。。。为什么你要麻烦自己让
li
可以点击？@roXon:列表区域有点大，所以我希望整个东西都可以点击。描述可以长也可以短。如果短，那么在叠加的div的底部有一个很大的空间。@catandmouse看我的答案！Catandmouse，很高兴能帮上忙。顺便说一句，这个选项阻止了单击。当单击链接以在新选项卡中打开它时，您不能按住该选项。@JoeVanDyk请您解释一下，我对您的评论有点迷茫。。。你在说什么“选项”？对不起，我猜这个词是“点击鼠标中键”。无论你用什么方法来告诉你的浏览器，当你点击一个链接时打开一个新的标签。Catandmouse，很高兴这有帮助。顺便说一句，当你点击一个链接时，你不能按住option在一个新标签中打开它。@JoeVanDyk请你解释一下，我对你的评论有点迷茫。。。你在说什么“选项”？对不起，我猜这个词是“点击鼠标中键”。单击链接时，您可以使用任何命令告诉浏览器打开新选项卡。
$('li').hover(function() {
    $(this).find('.one, .two').slideToggle(200);
});

$('.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;
});