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

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

项目用的是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. Log4J日志配置详解[转]

    一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...

  2. HDU 6098 Inversion

    Inversion 思路:从大到小排序后,每次找到第一个下标不整出i的输出. 代码: #include<bits/stdc++.h> using namespace std; #defin ...

  3. windows7 asp.net发布IIS 拒绝访问 解决方法

    在windows7中打开DNN网站有以下问题: CS0016: 未能写入输出文件“c:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP ...

  4. LeetCode 22. Generate Parentheses（构造）

    题目大意:给n个'(' 和 ')',构造出所有的长度为2*n并且有效的(可匹配的)字符串. 题目分析:这道题不难,可以直接搜索出所有可能的字符串,然后再逐一判断是否合法即可.但是还有更好的办法,实际上 ...

  5. SQL Server日志清空方法

    1.清空日志:DUMP   TRANSACTION   databasename   WITH   NO_LOG 2.截断事务日志:BACKUP   LOG   databasename   WITH ...

  6. Generate PDF in Sourcing through concurrent request，在EBS java并发中调用指定am的方法

    package oracle.apps.pon.printing.cp; import java.io.InputStream; import java.io.FileOutputStream; im ...

  7. consumer filter

    ProtocolFilterWrapper中buildInvokerChain方法把Filter链在一起,调用执行的时候,逐个执行filter,最后执行filter中的invoker. //Proto ...

  8. js实现个链表吧

    存储多个元素,最常用的数据结构是数组.但是数组有个一缺点,从数组中添加或移除项的成本很高,因为需要移动元素.链表也可以存储有序的元素集合,但是和数组不同,链表中的元素在内存中不是连续放置的.每个元素存 ...

  9. 51nod1537

    题解: 预处理每一个要变换几次,然后改成每一个要改变的次数-上一个要改变的次数 然后对于区间[l,r]修改,就是l++,r+1++ dp即可(据说可以o(n)) 代码: #include<bit ...

  10. JAVA第5次作业

    将指定目录下的所有文件显示到列表框(JList)组件中,如下图所示: import java.awt.BorderLayout; import java.awt.Color; import java. ...