Welcome, Old Sport!

CSS3鼠标经过显示内容

by ilikecss ON 2013/05/02 8316

CSS3鼠标经过显示内容刚回上海就有许多工作要做,在博客里答应了一个新朋友要制作一个关于鼠标经过后覆盖后显示新内容的效果,昨天在家用休息时间制作了一款类似的效果,纯CSS3打造的hover事件效果,我现在制作效果时能不用脚本就不用,尽量用CSS3去实现。不知道这款效果能否满足朋友的需求?先一起来看下代码吧。

Step1. HTML代码

<div class="label top">
    <p><span>Text Contents</span></p>
    <img src="img/img01.jpg">
</div>

Step2. CSS样式

.label {	
	/*Position*/
	overflow: hidden;
	position: relative;
	margin: 20px;
	display: inline-block;
	vertical-align: top;
	
	/*Skin*/
	border: 7px solid #FAFAFA;
	-webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
	box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
.label img {
	display: block;
}
.label p {
	/*Position*/
	position: absolute;
	height:100%;
	width: 100%;
	text-align: center;
	
	/*Skin*/
	background: #000; /*fallback*/
	background: rgba(0,0,0,0.7);
	color: #fff;
	font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
	
	/*Animation*/
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.label p:after {
	content: "+"; /*用伪类写的经过后内容附加内容*/
	font-style: normal;
	font-size: 2em;
	bottom: 10px;
	position: absolute;
	right: 10px;
	font-weight:normal;
}
.label p.lst:after {
	background:url(../img/spr.png) no-repeat 0 -50px; /*附加内容也可以用图片表示*/
	height:50px;
	width:50px;
	font-size: 0;
	bottom: 10px;
	position: absolute;
	right: 10px;
}
.label p span {
	padding-top: 55%;
	display:block;
}
/*Top In Bounds*/
.top:hover p {
	top: 0%; /*鼠标经过位置*/
}
/*Top Out of Bounds*/
.top p{
	top: -100%; /*初始位置*/
}

如果需要脚本实现此类效果,给两个相似的以前的文章链接地址:

15条评论
  1. #1

    mr.johness说道:

    COOL 感谢起来 :neutral: 多多关注新教程

  2. #2

    yxiao说道:

    厉害。

  3. 看看效果先

  4. #4

    不亦乐乎说道:

    这个很酷,和js实现的效果基本一样,要是无视ie这样就简单多了。 :neutral:

  5. #5

    大发说道:

    其实css3的一些动画效果和jQ是一样的,不过好像css3的性能不如jQ,一些比较复杂的动画效果卡爆了。。

    • 恩,但页面读取的速度是比脚本要快了,简单的效果还是用CSS方便点哈

  6. #6

    小二说道:

    很喜欢,请问下可以拿去用不? :neutral:

  7. #7

    xsinger说道:

    这个牛叉~~




TOP