vue项目里实现列表里因文字过长，加上鼠标移上去显示对应文字效果

示例图片

html

<div class="name-lists"><div class="title">测试测试测试测试</div><div class="hidden"><div class="lists"><div v-for="(item, i) in childCompany" :key="i"><div class="name-item" v-if="item.length < 14">{{ item }}</div><div v-else class="hint" :data-hint="item"> <div class="name-item">{{ item }}</div></div></div></div></div></div>

注意：:data-hint=“item” 必须有

js 数据定义

 data() {return {childCompany: ['测试1','测试2','测试3','测试4','测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶','测试1','测试1','测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶测试顶顶顶顶顶顶顶']};},

style

   .name-lists {width: 100%;height: 100%;padding: 20px 0;box-sizing: border-box;.title {font-size: 24px;color: #f9cc1d;margin-bottom: 10px;padding-left: 20px;}.hidden {width: 100%;overflow: hidden;.lists {height: 490px;margin-left: 20px;margin-right: -10px;overflow-y: auto;.name-item {position: relative;width: 360px;height: 40px;line-height: 40px;background: #0d183b;margin-top: 11px;padding: 0 12px;font-size: 22px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}}}}.hint {position: relative;width: calc(100% - 150px);// before 三角形   after 文字&::before,&::after {position: absolute;opacity: 0;z-index: 100;translate: 0.3s ease;// -webkit-transition: 0.3s ease;// -moz-transition: 0.3s ease;pointer-events: none; //禁止鼠标点击}&:hover::before,&:hover::after {opacity: 1;}&::before {content: "";background: transparent;border: 8px solid transparent;top: 100%;left: 70%;margin: -16px 0 0 0;border-bottom-color: #50adfe;}&::after {content: attr(data-hint);background: #50adfe;width: 340px;border-radius: 4px;color: #333;padding: 8px 10px;font-size: 22px;top: 100%;left: 0;}}

vue实现文字过长鼠标移上去显示对应文字，移走隐藏相关推荐

简单实现鼠标移上去显示所有文字，移走又隐藏
简单实现鼠标移上去显示所有文字,移走又隐藏,并且会依据你鼠标的位置,相应的发生改变. jsp代码: <div id="allDiv" style="border:s ...
HyperLink 鼠标经过时候显示全部文字
先说问题: 我在做一个上一篇,下一篇功能在显示的时候我先做了截取操作但是操作后要在前台显示的时, 鼠标经过时显示全部的文字所以添加下面的这个属性 this.HyperLink2.Attribu ...
layui 鼠标移入变为小手_如何在 LayUI 数据表格的列元素上，鼠标悬浮，显示所有文字内容（修改源码）...
文中使用的LayUI版本:layui-v2.5.5 问题描述: 最近参与开发了问题分析: 要实现鼠标悬浮显示所有内容,一般采用的都是给对应元素上添加 title 属性,这样当鼠标悬浮在对应列的时候, ...
显示文字_在 iPhone 上调整显示与文字大小，让眼睛更舒服
刚开始写这个系列文章的时候,不少朋友都建议我,如果要给中老年人看,字号一定要大大大.其实比较最初的文章,我们的确调整过字号的大小,不过终究还是定在了目前的正文 17 号字上. 从某种角度而言,我们也希 ...
div +css 添加鼠标放上去显示提示文字
有时候我们需要鼠标移到某个div,列表的某行某列或某个按钮上时显示出提示文字,此时我们只需设置title即可: 效果如图:
设置文字QT按钮包含图片与文字，以及鼠标停留备注显示，和sheetstyle风格设置。...
新手发帖,很多方面都是刚入门,有错误的地方请大家见谅,欢迎批评指正一.按键包括图片与文字,以文字的方向设定. 使用QToolButton按键创建对象 textAndImage::textAndIma ...
java 鼠标悬停显示文字_IntelliJ在鼠标悬停时显示JavaDocs工具提示
对于IntelliJ 13,IDE设置的编辑器页面中有一个复选框在此处输入图片说明编辑:对于IntelliJ 14,该选项已移至"编辑器">"常规"页 ...
html鼠标划到背景图显示文字,用css3实现鼠标移入图片后显示其他文字/图片的效果...
导读:当网页中需要实现鼠标移到某张图片,会有其他文字/图片替换当前图片的效果时,很多人会使用jQuery的效果,其实用css3就可以实现,而且很简单,下面列一下代码:主要用到的是position定位和 ...
使用echarts柱状图横坐标文字过长放不下，文字会被隐藏
今天在使用echarts中使用了柱状图,因为横坐标的文字过长,导致了显示不全,便去百度学习了一番总结下. 1.可以设置字体倾斜实现效果(我用的就是这个)上图这是在xAxis: 中加入了 axisLa ...

vue实现文字过长鼠标移上去显示对应文字，移走隐藏

vue实现文字过长鼠标移上去显示对应文字，移走隐藏

vue项目里实现列表里因文字过长，加上鼠标移上去显示对应文字效果

示例图片

html

js 数据定义

style

vue实现文字过长鼠标移上去显示对应文字，移走隐藏相关推荐

最新文章

热门文章