首页 > web前端 > html教程 > 【写给大家看的CSS】定位元素:使用position/display布局_html/css_WEB-ITnose

【写给大家看的CSS】定位元素:使用position/display布局_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:53:52
原创
1186 人浏览过

引言

       使用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>
登录后复制

  

  

    

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板