css hover结合 after before 实现鼠标移入变暗提示,移出恢复。并实现content中文字换行

0
0
0

之前做的一个项目,实现了鼠标移到div上面,div里面的图片变暗,同时出现一行字提示,

默认效果这

鼠标移上去变这样

鼠标移上去 图片变暗,上面出现一行字。

实现这个效果原理很简单,用了before 和 after,before 用来实现暗暗的背景,after 来实现背景上面的一行字。具体代码看下面

 .myimg:before {
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 100;
        background-color: #515151;
        opacity: 0;
        text-align: center;
        content: " ";
        transition: all 0.2s ease-in-out;
    }

    .myimg:hover:before {
        opacity: 0.8;
    }

    .myimg:after {
        display: block;
        width: 100%;
        position: absolute;
        z-index: 1000;
        opacity: 0;
        text-align: center;
        bottom: 0px;
        color: #e8e8e8;
        content: "修改图片"; 
    }

    .myimg:hover:after {
        opacity: 1;
    }


但是现在需求要改,鼠标移入后提示的文字要两行显示,像下面这样

多了一行图片宽度的提示.


上面代码 content 后面直接加上文字的话,是不会换行的,还是在一行显示,只是一行显示不下了才自动换行

 改成这样 content: "修改图片  800 * 800";效果是下面这样的

这个效果肯定是不行的。

【付费内容开始】

还有911字, 为付费内容,付费后阅读全部

阅读全文 支付 ¥2
有效期 3 天
同意并确认支付
本文和文中图片版权归作者所有,如转载本文或使用本文中的图片需获得授权
广告
色情
抹黑攻击
反社会
内容水
其它
确定提交
条向作者的提问
发布提问
禁止发布违反法律法规的内容
transform是设置元素的变形, transform-o...
什么是文字文字:为了传递和记录语言而使用的符号表意文字:文字...
我们在做密码验证功能的时候, 为了达到更好的用户体验,应该做...
最近项目中有一个需求(其实是甲方提出来的一个细节),box父...
总结 验证方式 和 鼠标交互效果百度的登录验证方式是1.通过...
发现网上有很多人都是抄别人的说法,自己都没有研究过,都说是w...
概述:混合工具在Illustrator中采用2个(或更多)形...
由于所有Illustrator对象都是向量,因此从基本形状创...
前端获取file选择的文件,然后添加到formdata,然后...
一个表的数据超过2百万,会直接影响到sql语句的执行效率,哪...
相信很多英语学习者都有过这样的境遇:词汇书看完一遍,最后只记...
真菌生物农药是当前生物农药主要发展方向之一,也是最安全、效果...
1.渐变背景创建一个矩形路径并用蓝色渐变填充它。2.屏幕渐变...
p82-100精确的行为所有知识不一定都储存在头脑里可分布在...
我们先在Illustrator中创建一个自定义画笔。步骤1:...
根据中国农药工业协会统计的数据,其15个会员单位2003年的...
本文不是网上各种水神文章,绝对能够解决实际的问题,遇到问题欢...
1.四种约束因素:物理、文化、语义和逻辑(1)面对一个新事物...
无论技术如何发展,出现的所谓的新技术也是由底层一代一代迭代出...
读书笔记《点石成金》02一、我们实际上是如何使用WEB的1....
示能通过外观就能说明它的功能。比如,菜刀的样子,表示能切菜。...
先声明,本文收费。用的过程中遇到问题,欢迎提问实现滑动浏览器...
巨峰葡萄植株早衰现象,是目前生产上普遍存在的一种现象,制约了...
巨峰葡萄植株早衰现象,是目前生产上普遍存在的一种现象,制约了...
看着是数字,但是转换成int时报错输入字符串格式不正确解决办...
为Illustrator制作自定义画笔比您预期的要容易得多。...
绿色食品是无污染的安全、优质、营养类食品。合理使用肥料是生产...
我们的考察船在布兰斯菲尔德海峡完成了最初几个站位的考察,在茫...
思考 —— 关于 如何 抓住用户情感的设计细节在交互设计中,...
本站部分内容来自于网络和用户发布,如有侵犯您的权益,请即时告之,我们将第一时间处理.
服务邮箱 ydh@terlogic.com
京ICP备13047789号-7