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

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

项目用的是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 820B - Mister B and Angle in Polygon

    820B - Mister B and Angle in Polygon 思路: 由于正多边形以某个顶点分成的三角形后以这个点为顶点的角都相等,所以可以确定两个点为相邻点,只要再找一个点就够了. 证明 ...

  2. Vultr新推出3.5美元/月套餐，并且支持微信支付了

    先前Vultr重新推出了2.5美元/月的套餐,但是不支持IPv4,所以不那么受国内朋友的欢迎,迫于压力,这不最近就推出了3.5美元/月的套餐了,这个套餐是支持IPv4的,有需要的朋友可以上车了,htt ...

  3. 搭建Eclipse+ADT+Android SDK 安卓开发环境

    安装JDK 请看JDK环境搭建 即可. 安装Eclipse Eclipse 是一个开放源代码的.基于Java的可扩展开发平台.就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境.幸运 ...

  4. Jersey 2.x 基于 Servlet 的服务器端应用

    下面的依赖通常应用到应用服务器上(servlet 容器),同时这个应用服务器上没有整合任何 JAX-RS 的实现. 因此,这个应用服务器需要包含有 JAX-RS API 和 Jersey 实现,同时部 ...

  5. Sasha and Interesting Fact from Graph Theory CodeForces - 1109D (图论,计数,Caylay定理)

    大意: 求a->b最短路长度为m的n节点树的个数, 边权全部不超过m 枚举$a$与$b$之间的边数, 再由拓展$Caylay$定理分配其余结点 拓展$Caylay$定理 $n$个有标号节点生成k ...

  6. 『cs231n』无监督学习

    经典无监督学习 聚类 K均值 PCA主成分分析 等 深度学习下的无监督学习 自编码器 传统的基于特征学习的自编码器 变种的生成式自编码器 Gen网络(对抗式生成网络) 传统自编码器 原理 类似于一个自 ...

  7. ubuntu软件(查看文件差异)

    你可以在ubuntu系统自带的软件--->ubuntu软件中心输入:meld diff 就可以安装.

  8. 最应该注意的Oracle版本之一

    最近以来,两个用户的库接连出现问题,经过查阅资料和分析,确定为数据库bug所致,其实,早在很久前,也遭遇过这个版本的类似bug,当时似乎还惊动了原厂的技术人员,后来确定为这个版本的bug,这个版本就是 ...

  9. Spring Boot的SpringApplication类详解

    相信使用过Spring Boot的开发人员,都对Spring Boot的核心模块中提供的SpringApplication类不陌生.SpringApplication类的run()方法往往在Sprin ...

  10. hidden="hidden"，display:none, visibility:hidden 三者的区别

    三者都可以实现隐藏元素的效果 1:display:none 就是把元素隐藏,即在页面上看不到这个元素,并且不占据任何位置 2:hidden="hidden"在页面展示出来效果跟di ...