<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>今日团购模块</title> <style type="text/css"> *{ margin:0px ; padding:0px; font-size: 12px ; } #pruduce{ width:948px ; background-color: darkgray; } .top{ height:56px ; background: url("images/top.jpg") no-repeat 10px 10px ; } .main{ text-align: center; height:308px ; } .box{ width: 300px; height:280px; border:1px solid red; margin:0px 6px ; float: left; cursor:pointer; } dl{ padding-top: 3px ; } dd{ line-height: 30px ; } div.btprice_1{ height:50px ; background: yellow url("images/bt1.jpg")no-repeat 5px 4px ; } div.btprice_2{ height:50px ; background: yellow url("images/bt2.jpg")no-repeat 5px 4px ; } div.btprice_3{ height:50px ; background: yellow url("images/bt3.jpg")no-repeat 5px 4px ; } .hoverstyle{ background-color: darkblue; color: white; } </style> <script type="text/javascript " src="https://www.jb51.net/js/jquery-1.8.3.js"></script> <script language="JavaScript"> $(document).ready(function () { $(".box dl").mouseover(function () { $(this).addClass('hoverstyle'); }); $(".box dl").mouseout(function () { $(this).removeClass('hoverstyle'); }); }); </script> </head> <body> <div> <div></div> <div> <div> <dl> <dt><img src="https://www.jb51.net/images/pic1.jpg" alt=""></dt> <dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd> </dl> <div></div> </div> <div> <dl> <dt><img src="https://www.jb51.net/images/pic2.jpg" alt=""></dt> <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> </dl> <div></div> </div> <div> <dl> <dt><img src="https://www.jb51.net/images/pic3.jpg" alt=""></dt> <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd> </dl> <div></div> </div> </div>
jQuery购物网页经典制作案例
内容版权声明：除非注明，否则皆为本站原创文章。