模仿淘宝上鼠标移动到商品图片时，出现的文字效果。

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鼠标滑过出现文字效果的更多相关文章

  1. 基于CSS3鼠标滑过放大突出效果

    还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错.今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种 ...

  2. CSS鼠标悬停图片加边框效果，页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  3. [JQuery代码]超酷鼠标滑过背景高亮效果

    1.效果及功能说明 鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏 2.实现原理 首先定义好一个重复实现效果的方法,然后定义光带出现速 ...

  4. 超强的纯 CSS 鼠标点击拖拽效果

    背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...

  5. Qt-QML-Button-ButtonStyle-实现鼠标滑过点击效果

    上次实现的自定义的Button功能是用的自定义的Rectangle来实现的,在慢慢的接触了QML之后,发现QML有自己定义的Button 这里盗版贴上Qt帮助文档中的部分关于Button的属性内容 B ...

  6. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  7. Asp.Net中GridView加入鼠标滑过的高亮效果和单击行颜色改变

    转载自:http://www.cnblogs.com/fly_dragon/archive/2010/09/03/1817252.html protected void GridView1_RowDa ...

  8. 使用css鼠标移动到图片放大效果

      <!DOCTYPE html>  <html>      <head>          <meta charset="UTF-8"& ...

  9. CSS实例：鼠标滑过超级链接文字时改变背景颜色

    先讲简单的: 通过CSS可以设置超链接在不同时刻的颜色: <style> a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #0 ...

随机推荐

  1. jmeter图片的下载

    1.jmeter下载文件 首先添加一个线程组,然后在线程组里面添加一个http请求,因为是获取数据,所有是get请求,写好下载的地址 1.添加线程组 :右键测试计划,添加-Threads(Users) ...

  2. GDI 线段绘制示例程序

    #include <windows.h> #include <strsafe.h> #include <stack> typedef struct tagLINE ...

  3. 封装自己的jquery框架

    jQuery is a fast small JavaScript library 如何封装自己的jQuery <script> // 这里使用沙箱模式,可以防止全局污染 (functio ...

  4. Project Euler 43 Sub-string divisibility

    题意: 1406357289是一个0至9全数字数,因为它由0到9这十个数字排列而成:但除此之外,它还有一个有趣的性质:子串的可整除性.记d1是它的第一个数字,d2是第二个数字,依此类推,我们注意到: ...

  5. 把SQLAlchemy查询对象转换成字典/json使用(汇总)

    1.使用SQLAlchemy from sqlalchemy import create_engine,Column,String,Integerfrom sqlalchemy.ext.declara ...

  6. Web项目部署(Flask Angular2 Nginx)

    独立弄了一个项目,也是锻炼自己的工程能力,使用了比较常用的框架,后端Flask,前端Angular2,采用前后端完全分离的方式,通过接口传输json,但是在具体部署过程中,查找资料较为零散,故整理如下 ...

  7. 【Manthan, Codefest 18 (rated, Div. 1 + Div. 2) C】Equalize

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] Swap操作显然只能对(i-1,i)执行才有用. 不然直接将i翻转以及j翻转 显然比直接交换更优. 那么现在我们就相当于有两种操作. ...

  8. centos安装wget 及配置

    yum -y install wget #yum -y install setup 本文 #yum install perl Searching for GCC... The path "& ...

  9. 操作符及SQL函数

    本节要点: 掌握 SQL 操作符 l  算术操作符 l  比较操作符 l  逻辑操作符 l  集合操作符 l  连接操作符 l  操作符的优先级 掌握并熟练应用SQL 函数 l  日期函数 l  字符 ...

  10. BigDecimal类（高精度小数）

    位置:java.math.BigDecimal 作用:提供高精度小数数据类型及相关操作 一.基本介绍 BigDecimal为不可变的.任意精度的有符号十进制数,其值为(unscaledValue * ...