内容简介：马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的.最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的.项目用的是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"} />
有人说, 哦, 如此啊, 其实还没完. 如果你的默认图片失败了怎么办, 是不是一直在重复加载呢. 哈哈, 明白了吧.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Mastering Flask
Jack Stouffer / Packt Publishing / 2015-9-30 / USD 49.99
Work with scalable Flask application structures to create complex web apps Discover the most powerful Flask extensions and learn how to create one Deploy your application to real-world platforms......一起来看看 《Mastering Flask》 这本书的介绍吧!
