jquery mouse Slide Show Details Application Example

The example of this article for everyone to achieve the effect is the mouse sliding, display details, the code is very concise, very suitable for learning

effect of the following figure : Implementation of the code is very small, very concise, reference to learning   code as follows: <script type= "Text/javascript" >  jQuery (document). Ready (function () {  ShowImage1 (); });  var ShowImage1 = function () {  $ (". Show_box1. Show_box_dd"). Hover (function (e) {&nbsp ; $ (". Show_box1. Phover"). Hide ();  $ (". Show_box1. Show_box_dd"). Show ();  $ (a). Hide ();  $ (this). Siblings (). Show (); },  function () { }); };  </script>    code is as follows: <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" > High praise Rating </span>  </div>   <div>  <dd style= "padding:15px 0 10px 15px" class= "phOver ">  <em class=" the "current" >1</em><img class= "Jiupic" src= "Images/jiu.gif" width= "the" Height = "/> " <span class= "pname" ><a href= "#" target= "_blank" > Wuliangye </a> </span><span class= "Pinpingzhe" > Evaluation score: </span><span class= "Fenshu" >8.6 points </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" > Wuliangye </a><span class= "Rank" >9 points </ 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=" height= "/>    <span class=" pname "><a href=" # "target=" _blank "> Luzhou old Cellar </a> </span><span CLAss= "Pinpingzhe" > Evaluation score: </span><span class= "Fenshu" >8.6 points </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" > Luzhou old Cellar </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=" height= "/>    <span class=" pname "><a href=" # "target=" _blank "> Gold six Blessings </a> </span><span class= "Pinpingzhe" > Evaluation score: </span><span class= "Fenshu" >8.6 points </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" > Gold six Fu </a><span class= "rank" >9 cent </span >  </dd>  </div>      </dl>  </div></pre>  < pre></pre>