css3之鼠标移入显示所有内容

最新推荐文章于 2024-04-25 15:57:52 发布

云之前端

最新推荐文章于 2024-04-25 15:57:52 发布

阅读量4.3k

点赞数 1

分类专栏：学习总结文章标签： css3鼠标移入显示内容 text-overflow属性应用 transition相关属性应用

本文链接：https://blog.csdn.net/qq_44586361/article/details/87863576

版权

学习总结专栏收录该内容

36 篇文章 0 订阅

订阅专栏

在做这个之前，我先介绍一下做这个需要用到的知识点：
text-overflow属性

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;

transition-property属性设置过渡动画所需操作的属性
transition-duration属性设置过渡动画持续时间，单位s(秒)，也可以为小数，如：0.5秒
transition-timing-function属性定义过渡方式（动画在过渡时间的速率）
重要知识点就这么多了，下面来看我们的代码吧：

<!DOCTYPE html>
<html>
<head>
	<title>css3之鼠标移入显示所有内容</title>
<style>
div
{text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border:2px solid blue;
width:300px;
cursor:pointer;}
div:hover
{white-space:normal;
height:200px;
background-color:silver;
transition-property:height,background-color;
transition-duration:0.5s;
transition-timing-function:ease-in;}
</style>
</head>
<body>
<div>下过雨的午后 时常经过的路口
却找不到理由 可以让我理所当然的经过
在桌上趴了很久 电话也拨了好几通
但回应却是 转接语音信箱中
于是我开始抱怨
是什么事物可以让你对我毫不眷恋
原来是你变了 原来是你变了
不会再主动了 不会再过问了
从前的一字一句一言一语全都成为人生中
不真实的一部分
原来是我笨了 原来是我笨了
笨得不会察言观色
笨到以为永远 你是我的
等到一切变得 不一样</div>
</body>
</html>

鼠标移入前效果图：
在这里插入图片描述
鼠标移入后效果图：

云之前端

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css3之鼠标移入显示所有内容

在做这个之前，我先介绍一下做这个需要用到的知识点：text-overflow属性text-overflow:ellipsis;overflow:hidden;white-space:nowrap;transition-property属性设置过渡动画所需操作的属性transition-duration属性设置过渡动画持续时间，单位s(秒)，也可以为小数，如：0.5秒transiti...
复制链接

扫一扫