利用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. Selenium_css 元素定位

    1.通过id定位       # 代表id driver.find_element_by_css_selector("#kw").send_keys("hao" ...

  2. 摘要 - Digest

    首先从md5说起,一般新进入开发行业最先接触的就是md5了,md5本质上是一个hash(谐音:哈希)算法,可以从一个大文件信息中提取出一小段信息,叫提取摘要,有的地方也有提取指纹这种说法,其实指纹这个 ...

  3. node-red 流程的导入导出

    流程的导入导出 流程的导出 选中所要导出的流程,点击右上角三条杠按钮 有两个选项,导出到剪贴板和库 1. 导出到剪贴板 导出到剪贴板可以复制,粘贴到任何地方 [{,,,,,,"wires&q ...

  4. springboot打成jar包后无法解压

    springboot打成jar包后无法解压 Springboot打出来的jar,用压缩工具解压报错.Why? 先说解决办法. 1.解决办法 executable属性导致的,属性改成false后重新打包 ...

  5. ADO.NET 五（DataAdapter 与 DataSet）

    在执行对表中数据的查询时还能将数据保存到 DataSet 中,但需要借助 DataAdapter 类来实现. 在实际应用中,DataAdapter 与 DataSet 是在查询操作中使用最多的类. 此 ...

  6. Oracle - 实现MySQL的limit功能

    MySQL的limit功能是获取指定行数的数据,Oracle没有这个limit,但是有其它方法. oracle数据库不支持mysql中limit功能,但可以通过rownum来限制返回的结果集的行数,r ...

  7. java中将对象引用设置为null对于GC有没有帮助

    相信,网上很多java性能优化的帖子里都会有这么一条: 尽量把不使用的对象显式得置为null.这样有助于内存回收 可以明确的说,这个观点是基本错误的.sun jdk远比我们想象中的机智.完全能判断出对 ...

  8. git stash 缓存本地修改 简介

    当我们在使用git的时候,又是会有这种情况:当新的需求了的时候.我们需要为此需求新建一个分支,再次分支上进行修改,当经过测试,提交代码时,在将其合并到主分支,或生产分支上. 但是有时候也有失误的时候, ...

  9. PHP传引用/作用域 问题

    $arr = [1,2,3]; foreach($arr as &$v) { //nothing todo. } foreach($arr as $v) { //nothing todo. } ...

  10. Linux kernel启动选项（参数）

    在Linux中,给kernel传递参数以控制其行为总共有三种方法: 1.build kernel之时的各个configuration选项. 2.当kernel启动之时,可以参数在kernel被GRUB ...