DIV CSS 佈局教程網

 本文示例要為大家實現的效果是鼠標滑動,顯示詳情，代碼很簡潔，很適合學習

效果如下圖：    實現的代碼很少，很簡潔，可參考學習  代碼如下: <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>