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

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

项目用的是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. Codeforces 525A - Vitaliy and Pie

    525A - Vitaliy and Pie 思路:贪心+hashing. 代码: #include<bits/stdc++.h> using namespace std; string ...

  2. Longest Repeating Character Replacement

    2018-06-29 22:56:24 问题描述: 问题求解: 本题是一条字符串问题,且是求Optimal,自然最初想到的是使用DP来进行求解,但是问题就是如果采用DP的话,前一个状态也太多了,和替换 ...

  3. English trip -- VC(情景课)4 A Health

    Word doctor doctor's office medicine   [ˈmɛdɪsɪn]  n. 药:医学:内科:巫术  vt. 用药物治疗:给…用药 pill  n. 药丸 nurse   ...

  4. Travelling Salesman and Special Numbers CodeForces - 914C (数位dp)

    大意: 对于一个数$x$, 每次操作可将$x$变为$x$二进制中1的个数 定义经过k次操作变为1的数为好数, 求$[1,n]$中有多少个好数 注意到n二进制位最大1000位, 经过一次操作后一定变为1 ...

  5. MySQL缓存机制

    对MySql查询缓存及SQL Server过程缓存的理解及总结 一.MySql的Query Cache 1.Query Cache   MySQL Query Cache是用来缓存我们所执行的SELE ...

  6. unity3d 博客

    博客: 1.http://my.csdn.net/caoboya 2.http://my.csdn.net/OnafioO

  7. Vysor安装图解

    Vysor安装图解   11 准备东西       路径 C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default   ...

  8. learning shell script prompt to run with superuser privileges （4）

    Shell script prompt to run with superuser privileges [Purpose]        Check whether have root privil ...

  9. Windows 7 英文版操作系统中文软件乱码解决方法

    http://blog.csdn.net/lqhbupt/article/details/18863243

  10. NodeJS express不是外部或内部命令的解决办法

    今天在用express生成项目的时候,使用cmd命令窗口发现express不是“内部或外部命令......”.但是我已经使用了npm install -g express成功安装了express模块插 ...