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

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

WBOY
發布: 2016-06-24 11:53:52
原創
1187 人瀏覽過

引言

       使用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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板