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;

}

图片也是自己换

我也是刚开始学,希望有错的地方大神们多加指点,也希望对刚学的朋友能够有所帮助.

刚来博客园,希望大家多多关照