css的hover

栏目: CSS · 发布时间: 6年前

内容简介:马上月底了, 这个月忙于工作和生活, 没有很好的写一篇博客, 有点忧伤. 为了弥补, 就写点简单的.最近项目有个需求, 就是鼠标移入的时候显示一个层, 移除的时候这个层消失. 当然层是可以点击进行额外操作的.项目用的是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"} />

有人说, 哦, 如此啊, 其实还没完. 如果你的默认图片失败了怎么办, 是不是一直在重复加载呢. 哈哈, 明白了吧.


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

共享经济大趋势

共享经济大趋势

倪云华 虞仲轶 / 2016-1-1 / 49.00

2015年互联网界乃至整个商界的最热门字眼,恐怕就是“共享经济”了。共享经济模式正以前所未有的速度与规模席卷全球。那么,共享经济为什么会产生?其本质是什么?共享经济会为我们带来什么价值?成功的共享经济商业模式是怎样的?如何管理和运作一家共享经济企业?在未来,共享经济还将面临哪些挑战?共享经济的下一个发展机会在哪里?传统经济又该如何应对? 作为国内第一本系统性阐述共享经济的书籍,本书通过对全球......一起来看看 《共享经济大趋势》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具