利用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. R学习笔记2 因子

    特殊值: 缺失值 NA(Not Avaiable),是不可用的缩写: NaN为“不是一个数”,意味着计算没有数学意义: NULL值,空值,表示一个空的变量,不会占用任何空间,通过is.null(x)来 ...

  2. npm run脚本传参

    1. 脚本上有set设置全局变量 "scripts": {     "start": "set REACT_APP_BA=12345 &&am ...

  3. 全栈项目|小书架|服务器开发-Koa2中间件机制洋葱模型了解一下

    KOA2 是什么? Koa是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 通过利用 asyn ...

  4. 如何在 WPF 中获取所有已经显式赋过值的依赖项属性

    原文:如何在 WPF 中获取所有已经显式赋过值的依赖项属性 获取 WPF 的依赖项属性的值时,会依照优先级去各个级别获取.这样,无论你什么时候去获取依赖项属性,都至少是有一个有效值的.有什么方法可以获 ...

  5. Widget Size and Position !!!!!!!!!!!!!!!!!!

    https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407 I have read many ques ...

  6. 不能在本机启动SQL Server服务错误代码126(要在协议里面禁用所有别的VIA，是怎么回事？)

    在启动数据库sql服务的时候提示[Windows 不能在 本地计算机 启动 SQL Server . 有关更多信息,查阅系统事件日志.如果这是非 Microsoft 服务,请与服务厂商联系,并参考特定 ...

  7. 【转载】C#中List集合使用Exists方法判断是否存在符合条件的元素对象

    在C#的List集合操作中,有时候需要根据条件判断List集合中是否存在符合条件的元素对象,此时就可以使用List集合的扩展方法Exists方法来实现,Exists方法的签名为bool Exists( ...

  8. PHP 结合 Bootstrap 实现学生列表以及添加学生功能实现（继上篇登录及注册功能之后）

    本人是一位学生,正在学习当中,可能BUG众多,请见谅并指正,谢谢!!! 学生列表实现 HTML: <!DOCTYPE html> <html> <head> < ...

  9. elementui switch 开关，点击确认按钮后在进行开关

    <el-table-column label="上头条" align="center"> <template slot-scope=" ...

  10. 信号的有效值(RMS)估计

    % Root Mean Square Value function [retval] = rms1(sig) N = 20; for k = 1 : length(sig)/N - 1 sig_sum ...