使用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.
立即学习“前端免费学习笔记（深入）”；
.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>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
462
收藏
