效果如下图:
实现的代码很少,很简洁,可参考学习
<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>
<div style="border-left: none" class="module-box1 orangeback show_box1">
<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>