jquery 鼠标滑动显示详情

效果如下图：

实现的代码很少，很简洁，可参考学习

<script type="text/javascript">
        jQuery(document).ready(function () {
            ShowImage1();
        });
        var ShowImage1 = function () {
            $(".show_box1 .show_box_dd").hover(function (e) {           
                $(".show_box1 .phover").hide();
                $(".show_box1 .show_box_dd").show();
                $(this).hide();
                $(this).siblings().show();              
            },
            function () {
            });
        };
 </script>

<div style="border-left: none" class="module-box1 orangeback show_box1">

                                    <dl>
                                        <div class="module-tit">
                                            <span class="store-name">好评度排名</span>
                                        </div>
                                        <div>
                                            <dd style="padding: 15px 0 10px 15px" class="phover">
                                                <em class="current">1</em><img class="jiupic" src="images/jiu.gif" width="100" height="100" />
                                                <span class="pname"><a href="#" target="_blank">五粮液</a> </span><span class="pinpingzhe">品评评分：</span><span class="fenshu">8.6分</span>
                                                <div class="jindu"><span class="jindutiao"><em class="fen0"></em></span></div>
                                            </dd>
                                            <dd class="show_box_dd" style="display: none;">
                                                <em>1</em><a href="#" target="_blank">五粮液</a><span class="rank">9分</span>
                                            </dd>
                                        </div>
                                        <div>
                                            <dd style="padding: 15px 0 10px 15px; display: none;" class="phover">
                                                <em class="current">2</em><img class="jiupic" src="images/jiu.gif" width="100" height="100" />

                                                <span class="pname"><a href="#" target="_blank">泸州老窖</a> </span><span class="pinpingzhe">品评评分：</span><span class="fenshu">8.6分</span>
                                                <div class="jindu"><span class="jindutiao"><em class="fen0"></em></span></div>
                                            </dd>
                                            <dd class="show_box_dd">
                                                <em>2</em><a href="#" target="_blank">泸州老窖</a><span class="rank">9分</span>
                                            </dd>
                                        </div>
                                        <div>
                                            <dd style="padding: 15px 0 10px 15px; display: none;" class="phover">
                                                <em class="current">3</em><img class="jiupic" src="images/jiu.gif" width="100" height="100" />

                                                <span class="pname"><a href="#" target="_blank">金六福</a> </span><span class="pinpingzhe">品评评分：</span><span class="fenshu">8.6分</span>
                                                <div class="jindu"><span class="jindutiao"><em class="fen0"></em></span></div>
                                            </dd>
                                            <dd class="show_box_dd">
                                                <em>3</em><a href="#" target="_blank">金六福</a><span class="rank">9分</span>
                                            </dd>
                                        </div>                                      


                                    </dl>                                 
                                </div>
jquery 鼠标滑动显示详情
原文：http://blog.csdn.net/lybwwp/article/details/18731381