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

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. Pyhton学习——Day2

    Python开发IDE(工具)Pycharm.eclipse1.循环while 条件 #循环体 #条件为真则执行 #条件为假则执行break用于退出所有循环continue用于退出当前循环 2.Pyc ...

  2. LINUX KERNEL启动参数

    LINUX KERNEL启动参数 在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时 ...

  3. C++基础 (6) 第六天 继承 虚函数 虚继承 多态 虚函数

    继承是一种耦合度很强的关系 和父类代码很多都重复的 2 继承的概念 3 继承的概念和推演 语法: class 派生类:访问修饰符 基类 代码: … … 4 继承方式与访问控制权限 相对的说法: 爹派生 ...

  4. Apache Http Client 4 上传多个文件 （示例代码可在 github 上找到）

    转自:http://www.baeldung.com/httpclient-multipart-upload Multipart Upload with HttpClient 4 1. Overvie ...

  5. 2019-04-03 SQL Group By某列，预先对该列进行一个预处理，提炼出共有的信息，即关键字case when 列名什么条件 then 赋值 else 赋值 end as 新列名

    select sum(发行金额) from( select PoolNameFormat,count(cast(ItemValue as decimal(19,4))) as 发行笔数,sum(cas ...

  6. TP框架 mysql子查询

    一些比较复杂的业务关系,用子查询解决. 比循环便利要好的多哈. 比如下面这句 select 和where in 语句都用了子查询. 因为父查询在select里,所以用了select的字段当子查询的条件 ...

  7. ie固定table单元格宽度

    <table border="0" style="width:690px; table-layout:fixed;"> <tr> < ...

  8. 03springMVC注解式控制器开发

    注解式控制器开发简介 注解式控制器开发HelloWorld HelloWorld的运行流程 处理器定义 REST简介 URL路径映射 数据绑定 不同的Model有相同的属性的处理 静态资源的处理 1  ...

  9. [JAVA]比毫秒System.currentTimeMillis()更精确的时间戳（纳米级时间戳）

     纳秒 ns(nanosecond):纳秒, 时间单位.一秒的10亿分之中的一个,即等于10的负9次方秒. 经常使用作 内存读写速度的单位,其前面数字越小则表示速度越快. 1纳秒=1000 皮秒 ...

  10. 【转】一分钟读懂互联网广告竞价策略GFP+GSP+VCG

    参考这篇文章: http://ju.outofmemory.cn/entry/116780 一分钟读懂互联网广告竞价策略GFP+GSP+VCG 两个广告位,三家广告主竞价,广告平台究竟应该制定广告竞价 ...