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>

　　<pre code_snippet_id="169406" snippet_file_name="blog_20140124_1_9547095" name="code" class="javascript"><div style="border-left: none" class="module-box1 orangeback show_box1"></pre>

　　<pre></pre>

　　<pre code_snippet_id="169406" snippet_file_name="blog_20140124_2_3723790" name="code" class="html"> <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></pre>

　　<pre></pre>