鼠标滑过时显示图片内容隐藏和鼠标滑过图片隐藏内容显示的两种小方法

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;

}

图片也是自己换

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

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