[CSS for everyone to see] Positioning elements: use position/display layout_html/css_WEB-ITnose

Introduction

Use position and display to achieve the effect of showing and hiding text or video when the mouse moves over the picture.

Knowledge points

1. The use of relative and absolute. When a child element uses position:absolute, the parent element should set position:relative so that it serves as the positioning context for determining the positioning of the paragraph. The relatively positioned element

here must be an absolutely positioned ancestor element to qualify as a positioning environment.

2. CSS selector. Two selectors are used: element, element and element element div p. There is nothing to say about the former, but mainly the latter, which selects all p elements inside the div element.

3. :hover selector. Used to select the element the mouse pointer is hovering over, can be used for all elements not just links. Such as div:hover, p:hover.

Effect

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/imghwm/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>