2019-04-18 彩妆

代码
1.HTML文件

<body>
<div>
<p class="title">大家都喜欢的彩妆</p>
<li><a href="#" id="a1"><span>1</span> Za姬芮新能真皙美白隔离霜 35g </a></li>
<div class="yincang" id="b1"><img src="图片素材/icon-1.jpg" width="160" height="160"><p>￥62.00 最近69122人购买</p></div>
<li><a href="#" id="a2"><span>2</span> 美宝莲精纯矿物奇妙新颜乳霜BB霜 30ml </a></li>
<div class="yincang" id="b2"><img src="图片素材/icon-2.jpg" width="160" height="160"><p>￥89.00 最近13610人购买</p></div>
<li><a href="#" id="a3"><span>3</span> 菲奥娜水漾CC霜40g </a></li>
<div class="yincang" id="b3"><img src="图片素材/icon-3.jpg" width="160" height="160"><p>￥59.90 最近13403人购买</p></div>
<li><a href="#" id="a4"><span>4</span> DHC 蝶翠诗橄榄卸妆油 200ml </a></li>
<div class="yincang" id="b4"><img src="图片素材/icon-4.jpg" width="160" height="160"><p>￥169.00 最近16757人购买</p></div>
</div>
</body>

2.JS文件

$(document).ready(function(){$ ("#a1").mouseover(function(){
$("#b1").css({ "display":"block" }) })$ ("#a1").mouseout(function(){
$("#b1").css({ "display":"none" }) })$ ("#a2").mouseover(function(){
$("#b2").css({ "display":"block" }) })$ ("#a2").mouseout(function(){
$("#b2").css({ "display":"none" }) })$ ("#a3").mouseover(function(){
$("#b3").css({ "display":"block" }) })$ ("#a3").mouseout(function(){
$("#b3").css({ "display":"none" }) })$ ("#a4").mouseover(function(){
$("#b4").css({ "display":"block" }) })$ ("#a4").mouseout(function(){
$("#b4").css({
"display":"none"
})
})
});

3.CSS文件

a{ padding-left:8px;
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dot_01.gif);
background-repeat:no-repeat;
text-decoration:none;
color:#063}
a:hover{color:#F0C;
background-image:url(%E5%9B%BE%E7%89%87%E7%B4%A0%E6%9D%90/dot_02.gif);
background-repeat:no-repeat;
padding-left:8px;

span{ color:#FFF}
#b1{
display: none;
padding-left: 100px;
color: #F3C;
}
#b4{
display: none;
padding-left: 100px;
color: #F3C;
}
#b2{
display: none;
padding-left: 100px;
color: #F3C;
}
#b3{
display: none;
padding-left: 100px;
color: #F3C;
}

</style>

效果

image.png

最后编辑于：2019.04.23 16:09:48