制作今日团购模块

空欢ོ喜ꦿ℘゜

于 2024-09-12 11:05:45 发布

阅读量566

点赞数 14

文章标签： jquery html

本文链接：https://blog.csdn.net/qq_61236034/article/details/142169886

版权

<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>今日团购模块 </title>
	<link rel="stylesheet" href="css/shopping.css">
</head>
<body>
<div id="pruduce">
	<div class="top"></div>
    <div class="main">
    	<div class="box">
        	<dl>
            	<dt><img src="images/pic1.jpg" /></dt>
                <dd>[包邮]亮点可移动儿童防身高帖（每个ID限20）</dd>
                
            </dl> 
            <div class="btprice_1"></div>
        </div>
        <div class="box">
        	<dl>
            	<dt><img src="images/pic2.jpg" /></dt>
                <dd>[包邮]韩国泡温泉游泳衣价达玛分教保守纤瘦大胸泳装</dd> 
            </dl> 
             <div class="btprice_2"></div>
        </div>
        <div class="box">
        	<dl>
            	<dt><img src="images/pic3.jpg" /></dt>
                <dd>[包邮]贵人鸟运动透气跑鞋P23423(每个限购5件)</dd>
               
            </dl> 
             <div class="btprice_3"></div>
        </div>
    </div> 
</div>

<script src="js/jquery-1.12.4.js" ></script>
<script>
	$(document).ready(function(){
		$(".box dl").mouseover(function(){
			$(this).addClass( "border")
		});
		$(".box dl").mouseout(function(){
			$(this).removeClass( "border")
		});
	});
</script>
<style>
	.border{
		border: 2px #D51938 solid;
		background-color:#D51938 ;
		color: white;
	}
</style>
</body>
</html>