【写给大家看的CSS】定位元素:使用position/display布局
引言
使用position和display来实现的当鼠标移动到图片上时显示和隐藏文字或者视频的效果。
知识点
1、relative、absolute的使用。 当子元素使用position:absolute时,父元素应该设置postion:relative以便使它作为决定定位段落的定位环境。在这里相对定位的元素
必须是绝对定位的祖先元素,才有资格成为定位环境。
2、CSS选择器。其中用到了两种选择器:element,element 和 element element div p,前者没什么好说的,主要是后者,选择div元素内部所有的p元素。
3、:hover选择器。用于选择鼠标指针浮动在上面的元素,可用于所有元素而不只是链接。如div:hover, p:hover.
效果
Html/Css
.video_select { width: 150px; border: 1px solid #069; padding: 5px; position:relative; } h2,p { font-size:.7em; font-family: Arial,sans-serif; margin: 0; } p { width: 80px; border:1px solid gray; padding: .3em; background-color: #FFD; display: none; position: absolute; top: 15px; left: 160px; } div:hover p, p:hover{display: block;}
<div class="video_select"> <a href=""><img src="3.jpg" alt="" /></a> <p>Boddy is a #2 Diabetic who weighted 274 pounds.After a change in diet he is no longer on medicatio.Runtime:46 sec</p> <h2><a href="#">Living with Diabetic;Boddy's story</a></h2> </div>
博客地址: | http://www.cnblogs.com/sword-successful/ |
博客版权: | 本文以学习、研究和分享为主,欢迎转载,但必须在文章页面明显位置给出原文连接。 如果文中有不妥或者错误的地方还望高手的你指出,以免误人子弟。如果觉得本文对你有所帮助不如【推荐】一下!如果你有更好的建议,不如留言一起讨论,共同进步! 再次感谢您耐心的读完本篇文章。 |