马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的.
最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的.
项目用的是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"} />有人说, 哦, 如此啊, 其实还没完. 如果你的默认图片失败了怎么办, 是不是一直在重复加载呢. 哈哈, 明白了吧.
原文地址：https://www.cnblogs.com/cloud-/p/9568800.html
时间： 2024-11-08 12:29:26