Jquery mouse sliding display Details Application Example

The effect is as follows:
 
The implementation code is very small and concise. You can refer to the learning method.
Copy codeThe Code is as follows:
<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>

Copy codeThe Code is as follows:
<Pre code_snippet_id = "169406" snippet_file_name = "blog_20140124_4259547095" 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 ranking </span>
</Div>
<Div>
<Dd style = "padding: 15px 0 10px 15px" class = "phover">
<Em class = "current"> 1 </em>
<Span class = "pname"> <a href = "#" target = "_ blank"> Wuliangye </a> </span> <span class = "pinpingzhe"> rating rating: </span> <span class = "fenshu"> score: 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"> Wuliangye </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>

<Span class = "pname"> <a href = "#" target = "_ blank"> Luzhou laojiao </a> </span> <span class = "pinpingzhe"> product evaluation rating: </span> <span class = "fenshu"> score: 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"> Luzhou laojiao </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>

<Span class = "pname"> <a href = "#" target = "_ blank"> Jin liufu </a> </span> <span class = "pinpingzhe"> rating rating: </span> <span class = "fenshu"> score: 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"> Jin liufu </a> <span class = "rank"> 9 points </span>
</Dd>
</Div>


</Dl>
</Div> </pre>
<Pre> </pre>