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;
}
圖片也是自己換
我也是剛開始學,希望有錯的地方大神們多加指點,也希望對剛學的朋友能夠有所幫助.
剛來博客園,希望大家多多關照