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

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

项目用的是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. English trip V1 - 3.What Would you Like? Teacher:Lamb Key: would like to

    In this lesson you will learn to talk about fast food and health. would = will 的过去式 STARTER 1.Tell y ...

  2. hdoj2476 String painter

    题意:有一刷子,能将区间内涂成同一字母.给出src,dst串,问最少涂几次? 用dp[i][j]表示区间[i,j]内最少涂的次数.len=1,2时很明显.len=3时,dp[i][j]要么就在dp[i ...

  3. android--------Retrofit+RxJava的使用

    Retrofit是Square公司开发的一款针对Android网络请求的一个当前很流行的网络请求库. http://square.github.io/retrofit/ https://github. ...

  4. Ubuntu18.04配置静态ip遇到的报错

    说明: 因为很多测试环境在这个Ubuntu系统上装着,却由于虚拟服务器的重启.断电,每次Ip发生变化,就得更新环境,所以需要把该环境的ip配置成静态的,一劳永逸. 根据以往配置Ubuntu静态ip的经 ...

  5. TitanX服务器登陆网关

  6. pycharm在创建py文件时，自动添加文件头注释

    File -> settings -> Editor-> File and Code Templates -> Python Script 添加内容: #!/usr/bin/e ...

  7. quartz---（1）

    Quartz Quartz是什么? 简单的一些例子 Quartz是什么 简单的认为Quartz是是一个定时器. 1.1. 下载 http://www.quartz-scheduler.org/down ...

  8. BZOJ1652 [Usaco2006 Feb]Treats for the Cows

    蒟蒻许久没做题了,然后连动规方程都写不出了. 参照iwtwiioi大神,这样表示区间貌似更方便. 令f[i, j]表示i到j还没卖出去,则 f[i, j] = max(f[i + 1, j] + v[ ...

  9. 转mysql半主从同步

    MySQL半同步复制 从MySQL5.5开始,MySQL以插件的形式支持半同步复制.如何理解半同步呢?首先我们来看看异步,全同步的概念   异步复制(Asynchronous replication) ...

  10. Oracle top 查询TOP SQL

    有时Oracle数据库服务器,系统CPU爆高,通过Top命令可以查看到占用CPU最高的进程 我们需要记住前几个TOP的pid号,带入下面的SQL,到数据库中查询运行的进程.服务器.用户.SQL.等待等 ...