马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的.

最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的.

项目用的是react,最开始使用的是mounseenter和mounseleave事件, 结果吧出现了点击进入另外一个路由后,再次点击回来后, 鼠标在元素上, 确没有再出现浮层. 这就有尴尬了.

当时还想用的是事件, 但想想现在css3鼠标事件, 动画, 伪类选择器这么成熟了. 额外去搜素了解了一下, 自己似乎以前看到过相关文章.

后来发现hover这个伪类 确实可以是比较帅. 当然只能控制子元素(大家这么说, 我等有时间还是好好琢磨琢磨).

基本实现蒙层, 就是蒙层设置为绝对定位, 默认是隐藏, hover的时候,显示出来,基本就是这样. mounseenter和mounseleave的防范, 你很快的移动的时候, 总是会有点莫名的问题出来. 这个简直就是救星一个了.

代码基本结构就是如此了.



<style type="text/css">

    .container{

        width:400px;height:200px;

        background-color: blueviolet

    }

    .layer{

        background-color:#8bb907;

        display:none;

        height: 100%;

        width: 100%;

        text-align: center;

    }

    .container:hover .layer{display:block;}

</style>

<body>

    <div class="container">

        <div class="layer">

           <a href="http://www.baidu.com">百度</a>

        </div>

    </div>

</body>

另外一个就是img默认图片加载失败的问题, 我开始很自信的写下了

<img src={item.src|| 'http://xxxxxx.png'}  alt="美女图片"/>

结果你会发现, src地址不正确或者加载失败的时候就愣是尴尬了, 怎么办,

如下就是更好的方案,如果加载失败,就显示默认的.

<img src={item.src}  alt="美女图片" onError={ev=>ev.target.src= "htpp://xxxxx.png"} />

有人说, 哦, 如此啊, 其实还没完. 如果你的默认图片失败了怎么办, 是不是一直在重复加载呢. 哈哈, 明白了吧.

另外再添加一个, ctrl + click 会把链接地址新窗口打开. 这本身没啥问题,我们项目本身是一个SPA的应用结合electron. 通过react-router来实现多页面.

而react-router实现路由的原理就是a标签. 这就尴尬了.

ctrl + click会弹出新窗口, 这............, 不要慌.

    preJudgment = ev => {

        // ctrl + 左键

        return ev.ctrlKey && ev.button === 0 && ev.preventDefault()

    }

    <NavLink exact onClick={this.preJudgment}  to={'/path'}></a>

如上就能解决问题, 虽然官网NavLink并没有提供这onClick的说明.

基本的思路就是判断是不是按下 ctrl + 鼠标左键, 组件默认行为.

为了更加保险, 你可以electron监听窗口打开事件, 多重保险.

css hover遮罩层的更多相关文章

  1. CSS常用遮罩层

    为什么80%的码农都做不了架构师?>>>   CSS常用遮罩层 应用场景: 上传了一张图片,鼠标移入到图片上的时候显示遮罩层,并且提示点击删除. 通过改变遮罩层的透明度来实现显示隐藏 ...

  2. css实现遮罩层，父div透明，子div不透明

    使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...

  3. css实现遮罩层(解决透明背景上的文字不透明)

    .PopUp_layer{   position:fixed;   top: 0;   left: 0;   right:0;   bottom:0;   width:100%;   height:1 ...

  4. jquery图片放大镜和遮罩层效果

    图片放大镜效果将借助于jqzoom插件,遮罩层借助于thickbox插件. 1.引入样式表 /*整体样式*/ <link rel="stylesheet" href=&quo ...

  5. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  6. 如何在Vue中，当鼠标hover上元素时,给元素加遮罩层

    介绍 当鼠标hover 上元素时,给元素加一层遮罩层. 效果图 使用 import VueHoverMask from 'vue-hover-mask' export default { compon ...

  7. Css动画形式弹出遮罩层，内容区上下左右居中于不定宽高的容器中

    <!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...

  8. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  9. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

随机推荐

  1. 算法笔记--树的直径 && 树形dp && 虚树 && 树分治 && 树上差分 && 树链剖分

    树的直径: 利用了树的直径的一个性质:距某个点最远的叶子节点一定是树的某一条直径的端点. 先从任意一顶点a出发,bfs找到离它最远的一个叶子顶点b,然后再从b出发bfs找到离b最远的顶点c,那么b和c ...

  2. eclipse wtp 没有自动生成 web.xml

    因此,运行servlet 时出错了. 网上查了一下,好像说确实不会自动生成,但是运行应该没有问题的. 幸亏找到了手动生成web.xml的方法,也就不纠结了. http://crunchify.com/ ...

  3. English trip -- VC(情景课)2 D Reading

    Xu言: 业精于勤,荒于嬉:行成于思,毁于随 Before you read 阅读准备 Talk about the picture, what do you see?看图说话,你看到了什么? Lis ...

  4. linux之CentOS7在线安装Mysql

    下载和添加仓库     1.wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm     2.sudo rpm -iv ...

  5. 12月3日周日，关联：has_many(dependent::delete_all和destroy的区别) 注意看log; where等查询语句的用法。 layout传递参数❌

    错误❌: 1.belongs_to :job, dependent: :destroy //尝试删除一条resumen后,job没有同步删除?? 答:建立一对多的关系,如job和resume.应该在j ...

  6. Android 7.0真实上手体验

    Android 7.0真实上手体验 Android 7.0的首个开发者预览版发布了,支持的设备只有Nexus6.Nexus 5X.Nexus 6P.Nexus 9.Nexus Player.Pixel ...

  7. Serega and Fun CodeForces - 455D (分块 或 splay)

    大意:给定n元素序列, 2种操作 将区间$[l,r]$循环右移1位 询问$[l,r]$中有多少个等于k的元素 现在给定q个操作, 输出操作2的询问结果, 强制在线 思路1: 分块 每个块内维护一个链表 ...

  8. Mysql查询用逗号分隔的字段-字符串函数FIND_IN_SET()，以及此函数与in()函数的区别

    查询用逗号分隔的字段,可以用字符串函数FIND_IN_SET(): 查询数据库表中某个字段(值分行显示),可以用函数in(). 今天工作中遇到一个问题,就是用FIND_IN_SET()函数解决的. 第 ...

  9. OC ARC之循环引用问题（代码分析）

    // // main.m // 03-arc-循环引用 // // Created by apple on 13-8-11. // Copyright (c) 2013年 itcast. All ri ...

  10. 如何迭代pandas dataframe的行

    from:https://blog.csdn.net/tanzuozhev/article/details/76713387 How to iterate over rows in a DataFra ...