1.鼠标滑过时显示图片,内容隐藏,下面以一个小日历的做法展示
<div class="date7">
<a href=""><div class="date7a"><span class="abcabc">30</span></div></a>
<a href=""><div class="date7a"><span class="abcabc">31</span></div></a>
<a href=""><div class="date7a"><span class="abcabc">1</span></div></a>
<a href=""><div class="date7a"><span class="abcabc">2</span></div></a>
</div>
.date7{
width: 302px;
height: 270px;
margin-top: 50px;
margin-left: 25px;
}
.date7 .date7a{
width: 41px;
height: 41px;
background: rgb(200,200,200);
float: left;
text-align: center;
line-height: 41px;
margin-right: 2px;
margin-bottom: 2px;
}
.date7 .date7a:hover{
background: url(../img/xiezi.png);
}
.date7 .date7a:hover .abcabc{
display: none;
}
需要代码试一试的话自己换一张图片,以上是先建立四个div给上颜色和数字居中,然后鼠标点击时设置div为display:none;.给上背景图片,就出现了想要的效果
下面是第二种效果
<div class="mainfirst">
<a href="#">
<div class="fristphoto">
<div class="fontone">
<span>
网易<br />
网易520游戏礼包H5</span>
</div>
<div class="date">
网易520游戏礼包
</div>
</div>
</a>
</div>
css如下:
.mainfirst{
width: 30%;
height: 243px;
float: left;
margin-left: 14px;
margin-right: 14px;
}
.mainfirst .fristphoto{
width: 100%;
height: 206px;
background: url(../img/center1.jpg) no-repeat;
background-size: 100% 100%;
}
.mainfirst a span{
width: 100%;
height: 106px;
color: white;
display: none;
padding-top: 100px;
}
.mainfirst a:hover span{
display: block;
}
.mainfirst:hover a span{
display: block;
background-color: rgba(66,66,66,0.5);
}
.mainfirst .fontone{
width: 100%;
height: 206px;
text-align: center;
}
.date{
width: 100%;
height: 37px;
background-color: white;
text-align: center;
color: gray;
}
.mainfirst:hover .date{
color: black;
}
图片也是自己换
我也是刚开始学,希望有错的地方大神们多加指点,也希望对刚学的朋友能够有所帮助.
刚来博客园,希望大家多多关照