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

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. Python爬虫3-----浏览器伪装

    1.浏览器伪装技术原理 当爬取CSDN博客时,会发现返回403,因为对方服务器会对爬虫进行屏蔽,故需伪装成浏览器才能爬取.浏览器伪装一般通过报头进行. 2.获取网页的报头 3.代码: import u ...

  2. nyoj254-编号统计

    编号统计 时间限制:2000 ms  |  内存限制:65535 KB 难度:2 描述 zyc最近比较无聊,于是他想去做一次无聊的统计一下.他把全校同学的地址都统计了一下(zyc都将地址转化成了编码) ...

  3. JZOJ5804. 【2018.08.12提高A组模拟】简单的序列

    性质:每个位置的前缀和必须大于0,总和=0.以此dp即可. #include <iostream> #include <cstdio> #include <cstring ...

  4. Python中的全局变量与局部变量的区别

    全局变量与局部变量两者的本质区别就是在于作用域 用通俗的话来理解的话, 全局变量是在整个py文件中声明,全局范围内都可以访问 局部变量是在某个函数中声明的,只能在该函数中调用它,如果试图在超出范围的地 ...

  5. C++ auto类型说明符

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50864612 编程时常常需要把表达式的 ...

  6. HDU5924 Mr. Frog’s Problem

    /* HDU5924 Mr. Frog’s Problem http://acm.hdu.edu.cn/showproblem.php?pid=5924 数论 * */ #include <cs ...

  7. HDU 1757

    简单的矩阵构造题,参看我前几篇的谈到的矩阵的构造法. #include <iostream> #include <cstdio> #include <cstring> ...

  8. COCOS2DX 3.0 优化提升渲染速度 Auto-batching

    COCOS2DX 3.0 优化提升渲染速度 Auto-batching 近期在看COCOS2DX 3.0的Auto-batching合批与Auto Culling动态缩减功能以下就来细致看看吧:整合好 ...

  9. Light OJ 1288 Subsets Forming Perfect Squares 高斯消元求矩阵的秩

    题目来源:Light OJ 1288 Subsets Forming Perfect Squares 题意:给你n个数 选出一些数 他们的乘积是全然平方数 求有多少种方案 思路:每一个数分解因子 每隔 ...

  10. SQL 递归使用

    直接贴代码吧= = WITH CTE AS ( -->Begin 一个定位点成员 SELECT COUNTRYORDERID,HSNAME, COUNTRYNAME,PARENTORDERID, ...