内容简介：马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的.最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的.项目用的是react,最开始使用的是mounseenter和mounseleave事件, 结果吧出现了点击进入另外一个路由后,再次点击回来后, 鼠标在元素上, 确没有再出现浮层. 这就有尴尬了.
马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的.
最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的.
项目用的是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"} />
有人说, 哦, 如此啊, 其实还没完. 如果你的默认图片失败了怎么办, 是不是一直在重复加载呢. 哈哈, 明白了吧.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
函数式算法设计珠玑
Richard Bird / 苏统华、孙芳媛、郝文超、徐琴 / 机械工业出版社 / 2017-4-1 / 69.00
本书采用完全崭新的方式介绍算法设计。全书由30个珠玑构成，每个珠玑单独列为一章，用于解决一个特定编程问题。这些问题的出处五花八门，有的来自游戏或拼图，有的是有趣的组合任务，还有的是散落于数据压缩及字串匹配等领域的更为熟悉的算法。每个珠玑以使用函数式编程语言Haskell对问题进行描述作为开始，每个解答均是诉诸于函数式编程法则从问题表述中计算得到。本书适用于那些喜欢学习算法设计思想的函数式编程人员、......一起来看看 《函数式算法设计珠玑》 这本书的介绍吧!
