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

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. 让SSL证书给服务器上一把“锁”

    近期,用户数据泄露的新闻接二连三地被曝光.先有京东金融App涉嫌自动获取用户手机中的敏感照片,随后CNET又爆出中国深圳的一家人工智能公司深网视界对于其人脸识别数据库没有密码保护,导致250万用户信息 ...

  3. Nginx全局变量

    一.全局变量 $args #请求中的参数值 $query_string #同 $args $arg_NAME #GET请求中NAME的值 $is_args #如果请求中有参数,值为"?&qu ...

  4. kernel对NTP的API，系统调用函数

    kenrel API for NTP kernel 提供两个API(即系统调用 system call)给应用程序NTP,去校准kernel system clock Kernel Applicati ...

  5. android的listview的addheaderView总是出现空指针的错误

    android的listview的addheaderView总是出现空指针的错误, 网上的处理方法如下: // This doesn't work... nullPointerException Li ...

  6. ASP 读取Word文档内容简单示例

    以下通过Word.Application对象来读取Doc文档内容并显示示例. 下面进行注册Word组件:1.将以下代码存档命名为:AxWord.wsc XML code复制代码 <?xml ve ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  8. Project Euler 47 Distinct primes factors（ 筛法记录不同素因子个数 ）

    题意: 首次出现连续两个数均有两个不同的质因数是在: 14 = 2 × 715 = 3 × 5 首次出现连续三个数均有三个不同的质因数是在: 644 = 22 × 7 × 23645 = 3 × 5 ...

  9. [luogu2047 NOI2007] 社交网络 (floyed最短路)

    传送门 输入输出样例 输入样例#1: 4 4 1 2 1 2 3 1 3 4 1 4 1 1 输出样例#1: 1.000 1.000 1.000 1.000 题解 在进行floyed的过程中,顺便更新 ...

  10. 4.1、Ansible模块

    ansible-doc -l    列出所有模块 ansible-doc 模块名    查看模块的help说明 ansible-doc -s  module_name:获取指定模块的使用信息 ***文 ...