【写给大家看的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>