利用display：none和display：blocks设置鼠标经过的一个效果。

注意的几个点：1.子绝父相定位 2.设置百分比宽高 3.播放按钮放用背景图做 4.a:hover .mask的写法

<body>

    <div class="tu">

        <a href="#">

            <img src="tu.png" alt="">

            <div class="mask"></div>

        </a>

    </div>

</body>
<style>

        .tu {

            width: 442px;

            height: 318px;

            position: relative;

        }

        .mask {

            width: 100%;

            height: 100%;

            background: rgba(66, 49, 49, 0.57) url("bo.png") no-repeat center;

            position: absolute;

            top:;

            left:;

            display: none;

        }

        a:hover .mask{

            display: block;

        }

    </style>

土豆案例（display：none和block的应用）的更多相关文章

  1. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  2. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  4. style.display table-row与block

    <tr id="js_rowShow" style=" display:none"> </tr> 问题: display:设置成bloc ...

  5. display:inline-block，block，inline的区别与用法

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  6. display inline or block

    一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置   margi ...

  7. display:inline、block、inline-block区别

    display:inline.block.inline-block区别 display:block就是将元素显示为块级元素. display:inline就是将元素显示为行内元素. inline-bl ...

  8. display:inline、block、inline-block的区别（摘抄）

    display:inline.block.inline-block的区别 display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...

  9. style="display:{{searchInput==='' ? 'none':'block'}} "

    当用户没有有效输入时,是否显示提交按钮 style="display:{{searchInput==='' ? 'none':'block'}} "

  10. display:inline、block、inline-block的区别 摘】

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

随机推荐

  1. CCF 2016-12-1 中间数

    CCF 2016-12-1 中间数 题目 问题描述 在一个整数序列a1, a2, -, an中,如果存在某个数,大于它的整数数量等于小于它的整数数量,则称其为中间数.在一个序列中,可能存在多个下标不相 ...

  2. webapi session

    webapi中使用session 修改global.cs里面的内容 using System; using System.Web; using System.Web.Routing; using Sy ...

  3. CLASSPATH 环境变量设置

    当 JVM 运行时,如果设置了 CLASSPATH 变量,那么 JVM 会到该目录下寻找 java 类文件 该变量配置的方式不同,寻找顺序也不同 在我的 D:\tmp\java\quickstart\ ...

  4. 深入理解JVM(二)--对象的创建

    Java是一门面向对象的语言,在Java程序运行的过程中,无时无刻都会有对象被创建出来,在程序语言中,创建对象(例如克隆,反序列化)通常仅仅是一个new关键字,但是在虚拟机中是怎样的呢?本文主要了解一 ...

  5. font-size 你所不知道的值

    说起 font-size  ,大家应该都知道是做什么的: CSS 属性指定字体的大小.因为该属性的值会被用于计算em和ex长度单位,定义该值可能改变其他元素的大小. 那么font-size 的值也是多 ...

  6. Referenced file contains errors (xml文件第一行小红叉错误）

    转自:http://www.manongjc.com/article/30401.html 在eclipse中开发网页时,经常会遇到写xml文件时第一行无缘无故报错.在最左面的行数上面报出一个小红叉, ...

  7. 在LINUX下ORACLE11.2.04的安装脚本及静默安装

    首先写好配置环境脚本 cd /opt vi oraclesetup #!/bin/bashecho "back file to filebackup"mkdir -p /opt/f ...

  8. Android Exception Hook

    承接上一篇文章Android Inline Hook,接下来我们看一下android系统中基于异常的hook方式,这种方式与inline hook相比实现较为简单,但执行效率是它的短板. except ...

  9. Jenkins 插件：Job Configuration History（记录job的历史更新记录）

    1. 添加插件   添加完成后,Jenkins,左下,多一个菜单栏 .可以查看,job的更新记录,见下图 .   如上,End再也不用担心,有同学乱改Job ,却不知道哪里被改的情况了. 注:1)这个 ...

  10. HQL基本语法及应用案例

    HQL基本语法及应用案例 摘自:<大数据技术体系详解:原理.架构与实践> 一.HQL基本语法 HQL是Hive提供的数据查询语言,由于Hive巨大的影响力,HQL已被越来越多的Hive O ...