css特效鼠标经过图片切换成文字

分享到：

来源：51模板集浏览：次发布时间：2014-05-24 08:49

css特效鼠标经过图片切换成文字效果，51模板集提供

css特效鼠标经过图片切换成文字

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css特效鼠标经过图片切换成文字-51模板集</title>
<script language="javascript" type="text/javascript">
function esc()
	{
		  
		       document.getElementById("bm").style.display='none';
		}
</script>

}

.hdnr .hdnr_in{
margin:0 auto;
width:1100px;
height:529px;

}

.hdnr_in .hdnr_in_1{
width:1100px;
height:74px;
  background-image: url(http://www.ahangels.com/special/2014ahqr/images/s_13.gif);
background-repeat: repeat-x;
}

.hdnr_in .hdnr_in_2{
	float:left;
width:1100px;
height:290px; display:inline; margin-top:61px; margin-bottom:27px;
}

.hdnr_in_2 .hdnr_in_21{ float:left; width:256px; height:290px;}
.hdnr_in_21 .hdnr_in_21u{ float:left; width:256px; height:34px;}
.hdnr_in_21u p{float:left; width:256px; height:34px; text-align:center; font-size:20px; color:#47a7d1; font-family:"微软雅黑";}
.hdnr_in_21 .hdnr_in_21d{ float:left; width:256px; height:256px;display:block;font-size:0px;text-indent:-9999px;overflow:hidden; background:url(http://www.ahangels.com/special/2014ahqr/images/d1_33.gif) no-repeat;}
.hdnr_in_21 .hdnr_in_21d1{ float:left; width:256px; height:256px;filter:alpha(opacity=80); -moz-opacity:.80; opacity:0.8; background:url(http://www.ahangels.com/special/2014ahqr/images/d11_33.gif) no-repeat;}
.hdnr_in_21d1 p{float:left; width:256px; height:148px; text-align:center; font-size:12px; color:#FFF; line-height:25px; display:inline; padding-top:50px;}
.hdnr_in_21d1 .hdnr_in_21d1zx{float:left; width:79px; height:30px; clear:both; display:inline; padding-left:90px; padding-top:50px;}

.hdnr_in_2 .hdnr_in_22{ float:left; width:256px; height:290px; display:inline; margin-left:25px;}
.hdnr_in_22 .hdnr_in_22u{ float:left; width:256px; height:34px;}
.hdnr_in_22u p{float:left; width:256px; height:34px; text-align:center; font-size:20px; color:#47a7d1; font-family:"微软雅黑";}
.hdnr_in_22 .hdnr_in_22d{ float:left; width:256px; height:256px;display:block;font-size:0px;text-indent:-9999px;overflow:hidden; background:url(http://www.ahangels.com/special/2014ahqr/images/d2_33.gif) no-repeat;}
.hdnr_in_22 .hdnr_in_22d1{ float:left; width:256px; height:256px;filter:alpha(opacity=80); -moz-opacity:.80; opacity:0.8; background:url(http://www.ahangels.com/special/2014ahqr/images/d21_33.gif) no-repeat;}
.hdnr_in_22d1 p{float:left; width:256px; height:148px; text-align:center; font-size:12px; color:#FFF; line-height:25px; display:inline; padding-top:50px;}
.hdnr_in_22d1 .hdnr_in_22d1zx{float:left; width:79px; height:30px; clear:both; display:inline; padding-left:90px; padding-top:50px;}

.hdnr_in_2 .hdnr_in_23{ float:left; width:256px; height:290px; display:inline; margin-left:25px;}
.hdnr_in_23 .hdnr_in_23u{ float:left; width:256px; height:34px;}
.hdnr_in_23u p{float:left; width:256px; height:34px; text-align:center; font-size:20px; color:#47a7d1; font-family:"微软雅黑";}
.hdnr_in_23 .hdnr_in_23d{ float:left; width:256px; height:256px;display:block;font-size:0px;text-indent:-9999px;overflow:hidden; background:url(http://www.ahangels.com/special/2014ahqr/images/d3_33.gif) no-repeat;}
.hdnr_in_23 .hdnr_in_23d1{ float:left; width:256px; height:256px;filter:alpha(opacity=80); -moz-opacity:.80; opacity:0.8; background:url(http://www.ahangels.com/special/2014ahqr/images/d31_33.gif) no-repeat;}
.hdnr_in_23d1 p{float:left; width:256px; height:148px; text-align:center; font-size:12px; color:#FFF; line-height:25px; display:inline; padding-top:50px;}
.hdnr_in_23d1 .hdnr_in_23d1zx{float:left; width:79px; height:30px; clear:both; display:inline; padding-left:90px; padding-top:50px;}

.hdnr_in_2 .hdnr_in_24{ float:left; width:256px; height:290px; display:inline; margin-left:25px;}
.hdnr_in_24 .hdnr_in_24u{ float:left; width:256px; height:34px;}
.hdnr_in_24u p{float:left; width:256px; height:34px; text-align:center; font-size:20px; color:#47a7d1; font-family:"微软雅黑";}
.hdnr_in_24 .hdnr_in_24d{ float:left; width:256px; height:256px;display:block;font-size:0px;text-indent:-9999px;overflow:hidden; background:url(http://www.ahangels.com/special/2014ahqr/images/d4_33.gif) no-repeat;}
.hdnr_in_24 .hdnr_in_24d1{ float:left; width:256px; height:256px;filter:alpha(opacity=80); -moz-opacity:.80; opacity:0.8; background:url(http://www.ahangels.com/special/2014ahqr/images/d41_33.gif) no-repeat;}
.hdnr_in_24d1 p{float:left; width:256px; height:148px; text-align:center; font-size:12px; color:#FFF; line-height:25px; display:inline; padding-top:50px;}
.hdnr_in_24d1 .hdnr_in_24d1zx{float:left; width:79px; height:30px; clear:both; display:inline; padding-left:90px; padding-top:50px;}

.hdnr_in .hdnr_in_3{
width:1100px;
height:45px;
line-height:45px;
font-size:14px;
color:#555555;
}
</style>

</head>

<body>
<div class="hdnr">
         <div class="hdnr_in">
              <div class="hdnr_in_1">
      
             </div>
             
             <div class="hdnr_in_2">
      			<div class="hdnr_in_21">
                	<div class="hdnr_in_21u"><p>1.超级奶爸PK赛</p></div>
                    <div class="hdnr_in_21d1" onmouseover="this.className='hdnr_in_21d1'" onmouseout="this.className='hdnr_in_21d'">
                    	<p>现场将邀请五位准爸爸上台PK，请护<br>士长评比比赛结果，并加以纠正和指导。<br>①比赛项目：准爸爸换上孕妇装给模具宝<br>宝换尿布、穿衣服、包包被、抱宝宝，拍<br>嗝。②比赛规则：操作手法最准确，用时<br>最少者获胜。</p>
                        <div class="hdnr_in_21d1zx">
                        	<a href="/wytx/flashtx/"><img src="/uploads/allimg/140524/0U51K556-0.gif"></a>
                        </div>
                    </div>
                </div>
                <div class="hdnr_in_22">
                	<div class="hdnr_in_22u"><p>2.瑜伽互动</p></div>
                    <div class="hdnr_in_22d" onmouseover="this.className='hdnr_in_22d1'" onmouseout="this.className='hdnr_in_22d'">
                    	<p>现场将邀请四对准爸妈上台参<br>与瑜伽表演，请金牌瑜伽教练现场教授准<br>爸妈做几个简单的瑜伽动作，再让四对准<br>爸妈重新表演刚刚学过的瑜伽动作，请瑜<br>伽教练评比结果，并加以纠正指导，做的<br>最好最标准的准爸妈获胜。</p>
                        <div class="hdnr_in_22d1zx">
                        	<a href="/wytx/flashtx/"><img src="/uploads/allimg/140524/0U51K556-0.gif"></a>
                        </div>
                    </div>
                </div>
                <div class="hdnr_in_23">
                	<div class="hdnr_in_23u"><p>3.品尝营养餐</p></div>
                    <div class="hdnr_in_23d" onmouseover="this.className='hdnr_in_23d1'" onmouseout="this.className='hdnr_in_23d'">
                    	<p>兴建医院特色自办农场，全程、全方<br>位实现绿色生态养殖，为医院提供纯绿色<br>健康食品，从根源上杜绝污染；广州利苑<br>酒家高级厨师领衔行政总厨，省内知名厨<br>师、韩国营养师、妇产科医生共同组建安<br>琪儿营养中心。</p>
                        <div class="hdnr_in_23d1zx">
                        	<a href="/wytx/flashtx/"><img src="/uploads/allimg/140524/0U51K556-0.gif"></a>
                        </div>
                    </div>
                </div>
                <div class="hdnr_in_24">
                	<div class="hdnr_in_24u"><p>4.幸运大抽奖</p></div>
                    <div class="hdnr_in_24d" onmouseover="this.className='hdnr_in_24d1'" onmouseout="this.className='hdnr_in_24d'">
                    	<p>孕妈妈在签到处即可领取精美礼品<br>一份，参与游戏的准爸妈也将获得由安琪<br>儿准备的精美礼品一份，更重要的是活动<br>结束后专家会抽取本期沙龙活动的幸运大<br>奖——婴儿学步车，带着您的好孕，赶紧<br>报名吧！</p>
                        <div class="hdnr_in_24d1zx">
                        	<a href="/wytx/flashtx/"><img src="/uploads/allimg/140524/0U51K556-0.gif"></a>
                        </div>
                    </div>
                </div>
             </div>

</div>

</div></body>
</html>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。