急，请熟悉jquery的朋友帮忙。让隐藏部分信息的li显示完全。

现有以下代码
<style>.all{display:none}</style>
<ul class="list"><li>
<a herf="/"><img src="q.jpg"></a>
<p>名称</p><div class="all">
<p>时间：2011-09-01</p>
<p>地址:北京市</p>
</div></li>
...
</ul>
原本的li只显示jpg和a,隐藏all
现在要求：当鼠标移到li上显示all的内容并且给li addclass一个on样式变成<li class="on">。
请大家帮忙，谢谢。我找了张网页：http://www.heetour.com/Holiday/FoodList.aspx 效果是我要的，但其代码很繁杂，我实在看不懂。

解决方案 »

  1.   

    $('li').hover(function(){$('.all').show();$(this).addClass('on');})
      

  2.   

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style>.all{display:none}</style>
    </head>
    <body>
    <ul class="list">
    <li>
    <a herf="/"><img src="q.jpg"></a>
    <p>名称</p>
    <div class="all">
    <p>时间：2011-09-01</p>
    <p>地址:北京市</p>
    </div>
    </li>
    <li>
    <a herf="/"><img src="q.jpg"></a>
    <p>名称</p>
    <div class="all">
    <p>时间：2011-09-01</p>
    <p>地址:天津市</p>
    </div>
    </li>
    </ul>
    <script>
    $('ul.list').delegate('li', 'mouseover', function(event){
    var elem = $(event.currentTarget),
                 fromElem = $(event.relatedTarget);
                if(fromElem.has(elem).length !== 0){
                 elem.addClass('on');
    elem.find('.all').show();
                }
    }).delegate('li', 'mouseout', function(event){
    var elem = $(event.currentTarget),
                 toElem = $(event.relatedTarget);
                if(toElem.has(elem).length !== 0){
                 elem.removeClass('on');
    elem.find('.all').hide();
                }
    });
    </script>
    </body>
    </html>
      

  3.   

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <style>.all{display:none}</style>
    </head>
    <body>
    <ul class="list">
    <li>
    <a herf="/"><img src="q.jpg"></a>
    <p>名称</p>
    <div class="all">
    <p>时间：2011-09-01</p>
    <p>地址:北京市</p>
    </div>
    </li>
    <li>
    <a herf="/"><img src="q.jpg"></a>
    <p>名称</p>
    <div class="all">
    <p>时间：2011-09-01</p>
    <p>地址:天津市</p>
    </div>
    </li>
    </ul>
    <script>
    $('ul.list li').mouseenter(function(){
    $(this).addClass('on').find('.all').show();
    }).mouseleave(function(){
    $(this).removeClass('on').find('.all').hide();
    });
    </script>
    </body>
    </html>