jquery 鼠标滑动显示详情应用示例

前端技术 2023/09/07 JavaScript
效果如下图：
 
实现的代码很少，很简洁，可参考学习
复制代码 代码如下:

<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>

本文地址：https://www.stayed.cn/item/17952

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案