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

引言

       使用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="/static/imghw/default1.png"  data-src="3.jpg"  class="lazy" 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 id="a-href-Living-with-Diabetic-Boddy-s-story-a"><a href="#">Living with Diabetic;Boddy's story</a></h2></div>