如何创造整个<光>可点击，然后在鼠标停留期间在顶部显示框

How to create entire <li> clickable and then show box on top during mouse over?

本文关键字：然后 鼠标 停留 显示 顶部 创造 何创造      更新时间：2023-09-26

我有一个列表，里面有一些细节。我喜欢做的是让每个列表都是可点击的，然后当鼠标在上面时，列表顶部会显示一个包含进一步信息的框。

这是列表:

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

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

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

这个效果的一个例子是:

http://www.hungrygowhere.com/(星展银行特别宽免部分)

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

看这个!

演示
$('.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()以防止重复鼠标悬停时动画冒泡

对你的html进行一些修改，然后可以使用jQuery的slideToggle()来显示和隐藏你的<li>的不同元素

<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>
jQuery

$('li').hover(function() {
    $(this).find('.one, .two').slideToggle(200);
});

查看工作示例http://jsfiddle.net/phRnZ/1/

相关文章：