鼠标悬停熟悉

<html>
<head>
<title>鼠标悬停使用</title>
<style>body>div{display:flex;justify-content:flex-start;}.test{background:#cccccc;width:150px;}.test1{background:#eeeeee;}.hide{width:150px;height:20px;line-height:20px;/*超出部分隐藏*/overflow:hidden;/*不换行*/white-space:nowrap;/*超出字符修剪：设置省略号*/text-overflow: ellipsis;}.tips{height:20px;line-height:20px;display:none;width:max-content;}.test:hover > .tips{display:block;background:rgba(0,0,0,1);color:#ffffff;position:relative;z-index:10;}.test:hover > .hide{display:none;}
</style>
</head>
<body><h1>My First Heading</h1><p>My first paragraph.</p>
<div>
<div class="test"><div class="hide">我的宽度是150px,超过部分不再显示，鼠标移上提示。</div><div class="tips">我的宽度是150px,超过部分不再显示，鼠标移上提示。</div>
</div>
<div class="test1">我在右边
</div>
</div>
</body>
</html>