模仿淘宝上鼠标移动到商品图片时，出现的文字效果。
1、效果图
鼠标移动到粉红色的区域，则出现黄色部分。
2、代码
<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<link rel="stylesheet" href="css/lobal.css"/> ???<style> ???????????.box1{ ???????????/*定义父级的大小，设置高度为图片高度，便于隐藏文字部分*/ ???????????width: 210px; ???????????height: 200px; ???????????background: blue; ???????????position: relative;/*overflow: hidden;隐藏文字部分*/ ???????????overflow: hidden;/*隐藏超出的部分，就是隐藏蒙版部分*/ ???????} ???????.box1_cont{ ???????????height: 200px; ???????????height: 200px; ???????????background: palevioletred; ???????????color: #fff; ???????} ???????.mb{ ???????????/*创建一个蒙版*/ ???????????height: 100px; ???????????width: 210px; ???????????background:rgba(255,255,0,0.5); ???????????position: absolute;/*定好蒙版一开始在的位置*/ ???????????bottom:-100px;/*距离box1底部的距离为mb自身的高*/ ???????????left: 0; ???????????transition: all linear 0.5s;/*设置蒙版的上升动画效果*/ ???????} ???????.box1:hover .mb{ ???????????bottom: 0;/*将蒙版底部位置上移,与父级box1底部对齐*/ ???????} ???????.box2{ ???????????width: 210px; ???????????background: peachpuff; ???????} ???????????</style></head><body><div class="box1"> ???<div class="box1_cont">我是父容器里面的div</div> ???<div class="mb"> ???????<a href=""><span>呵呵你们在飞洒的开发</span></a> ???</div></div><div class="box2"> ???<span>由于box1设置了overflow，mb没有占用位置</span></div></body></html>2017-09-23
css鼠标滑过出现文字效果
原文地址：http://www.cnblogs.com/wgl0126/p/7583480.html