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

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. 热重载 预编译 编译器 JS引擎 作用域

    热重载就是页面每次改动,不需要手动去刷新,可自动刷新.保持vuex的状态. JS之预编译 JavaScript的预编译 编译器 JS引擎 作用域三者之间的关系 建议你先去看看你不知道的JavaScri ...

  2. velocity.ui2.0所有的内置动画名称

    velocity升级到2.0后api发生了变化,按照原来的名称已经不能调用原来的动画效果,新的名称如下:velocity.ui2.0所有的内置动画名称 bounce flash headShake j ...

  3. 完全二叉树（Complete Binary Tree）

    Date:2019-03-25 19:36:45 判断一棵树是否为完全二叉树 #include <queue> using namespace std; void IsComplete(n ...

  4. IOS与h5交互记录

    博主之前做过移动端app嵌入网页,与Android和IOS有交互,一直没有时间分享过程.这里不多说Android交互啦-很简单,详细了解IOS与h5的交互吧. IOS不同语法和h5的交互所建立的JSB ...

  5. jquery ajax 全介绍

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...

  6. ELK介绍及搭建 Elasticsearch 分布式集群

    上:https://blog.51cto.com/zero01/2079879 下:https://blog.51cto.com/zero01/2082794

  7. 2018年九个很受欢迎的vue前端UI框架

    最近在逛各大网站,论坛,SegmentFault等编程问答社区,发现Vue.js异常火爆,重复性的提问和内容也很多,小编自己也趁着这个大前端的热潮,着手学习了一段时间的Vue.js,目前用它正在做自己 ...

  8. 香蕉派 Banana pi BPI-M2 四核开源单板计算机.

     Banana PI BPI-M2 是一款四核高性能单板计算机,Banana PI BPI-M2是一款比树莓派更强悍的四核Android4.4产品. Banana PI BPI-M2兼容性强大,能 ...

  9. RGB 与 (RGB转 YCbCr再转为 RGB)的图像

           RGB 与 (RGB转 YCbCr再转为 RGB)的图像   不可逆,能够从 矩阵的逆运算看出来. 附上 matlab 代码:         clc,clear; Source=imr ...

  10. Java測试覆盖率工具----Cobertura,EclEmma

    Cobertura 是一个与Junit集成的代码覆盖率測量工具 它是免费.开源的 它能够与Ant和Maven集成.也能够通过命令行调用 能够生成HTML或XML格式的报告 能够依照不同的标准对HTML ...