利用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. 小程序发起get请求====post请求

  2. Keyboard Purchase CodeForces - 1238E (状压)

    大意: 给定串$s$, 字符集为字母表前$m$个字符, 求一个$m$排列$pos$, 使得$\sum\limits_{i=2}^n|{pos}_{s_{i-1}}-{pos}_{s_{i}}|$最小. ...

  3. 全栈项目|小书架|微信小程序-首页水平轮播实现

    首页效果 首页功能主要有 搜索(下篇文章介绍) 图书列表 图书列表 分析一波: 列表是水平滑动 点击列表会有按压效果:布局整体缩小 每个布局的信息从上到下排列分别是:图片.书名.作者.出版社 每个布局 ...

  4. Online Hard Example Mining 理解

    Definition: Online Hard Example Mining (OHEM) is a way to pick hard examples with reduced computatio ...

  5. JavaJDK多任务执行框架（六）

    class Temp extends Thread { public void run() { System.out.println("run"); } } public clas ...

  6. java 堆 排序学习

    /** * <html> * <body> * <P> Copyright 1994 JsonInternational</p> * <p> ...

  7. System.ComponentModel.Win32Exception (0x80004005): 无效的窗口句柄。

    原文:System.ComponentModel.Win32Exception (0x80004005): 无效的窗口句柄. 在 WPF 获取鼠标当前坐标的时候,可能会得到一个异常:System.Co ...

  8. SVN commit:remains in tree-conflict错误的解决办法

    转自:https://chenjinbo1983.iteye.com/blog/2005123 昨天在提交一个新类包的时候,出错了,重新提交了几次也不行. 错误是:Aborting commit: ‘ ...

  9. Git和GitHub在线学习资源整理

    电子书 GotGitHub Git Workflow 沉浸式学习Git 文章 GitHub Fundamental visual-git-guide 图形化的Git参考手册 Linux下使用git命令 ...

  10. springboot学习入门简易版八---springboot2.0多环境配置、整合mybatis mysql8+（19-20)

    2.11 SpringBoot多环境配置(19)  application.properties中配置 Spring.profiles.active=prd 配置环境: Application-dev ...