鼠标悬停熟悉

最新推荐文章于 2024-09-06 23:41:09 发布

UP九万里

最新推荐文章于 2024-09-06 23:41:09 发布

阅读量103

点赞数

分类专栏： html/css 文章标签： html css

本文链接：https://blog.csdn.net/jilijo/article/details/107352403

版权

html/css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<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>

UP九万里

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标悬停熟悉

<html><head><title>鼠标悬停使用</title><style> body>div{ display:flex; justify-content:flex-start; } .test{ background:#cccccc; width:150px; } .test1{ background:#eeeeee; } .hid.
复制链接

扫一扫

专栏目录