利用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. golang - 映射 ini 配置文件

    使用:setting.AppSetting.PageSize 包:go get github.com/go-ini/ini

  2. Logrotate滚动openresty日志

    一.摘要 Linux服务器上我们用Logrotate来分割归档日志文件,结合crond我们可以指定每天在某个时间自动整理日志等文档.本文主要说明了Centos下Logrotate的使用和配置的方法. ...

  3. Luogu3214 HNOI2011 卡农 组合、DP

    传送门 火题qwq 我们需要求的是满足元素个数为\(M\).元素取值范围为\([1,2^n-1]\).元素异或和为\(0\)的集合的数量. 首先我们可以计算元素有序的方案数(即计算满足这些条件的序列的 ...

  4. Oracle scott解锁 以及连接数据库

    最近公司需要使用oracle数据库,本地安装oracle进行测试,需要连接到数据库,但是发现scott账号 is locked; 原因:默认Oracle10g的scott不能登陆. 解决:(1)con ...

  5. docker的学习总结

    一 docker的8个使用场景1.简化配置虚拟机的最大好处是能在你的硬件设施上运行各种配置不一样的平台(软件, 系统), Docker在降低额外开销的情况下提供了同样的功能. 它能让你将运行环境和配置 ...

  6. Process.Start cmd 参数空格问题解决

    Process.Start("cmd.exe", "/c start  \"title\"  \"C:\\Program Files\\a. ...

  7. MySQL安装后的初始优化

    mysql数据库在安装之后,有一些内置的库(test库).用户(如root@localhost.localdomain)是不需要的,而且在Linux系统上,yum安装的mysql是默认无root密码的 ...

  8. springboot中常用的依赖

    <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://mave ...

  9. Swift之xib模块化设计

    一.解决问题 Xib/Storybarod可以方便.可视化的设置约束,在开发中也越来越重要.由于Xib不能组件化,使得封装.重用都变得不可行.本文将介绍一种解决方案,来实现Xib组件化. 二.模型块原 ...

  10. 关于近期使用webpack所引发的思考

    近期,(使其也挺长时间了).使用了一段时间的webpack. 但是在使用期间个人感觉并不想网上说的那样好,个人对webpack的评价并不是很高,甚至有点反感使用webpack. 个人感觉使用webpa ...