H5+vue table 鼠标移入事件
0
悬赏园豆：100
[已解决问题]
解决于 2024-09-19 11:34
源码是这样
<table border="1" cellspacing="0" style="line-height:50px;text-align:center">
<tr>
<td>姓名</td>
<td colspan="3" v-for="item in 50" :key="item">{{time[item-1]}}</td>
</tr>
<tr v-for="item in 5" :key="item">
<td >{{userName[item-1]}}</td>
//mouseover鼠标移入事件
//mouseleave鼠标移出事件
<td v-for="item in 150" :key="item" @mouseover="mouseOver" @mouseleave="mouseLeave" :style="active">555555555</td>
</tr>
</table>
这是效果图
)
我遇到的问题是在一个时间对应三个列，现在要实现鼠标移入某一列时出现文字提示，但是我循环做的，后面不知道该怎么写了，帮帮菜菜吧
最佳答案
-1
鼠标移入的时候出现提示文字直接在 td 上用 title="提示文字" 属性就行了
如果需要自定义提示的样式就用 :hover
td .tip {
display: none;
}
td:hover .tip {
display: block;
}
收获园豆：100
因为每一个提示文字不一样所以很苦恼
@酷酷k: 写个对象就是了噻
<td v-for="item in 150" :key="item" :title="titles[item]">
data() {
return {
titles: {
1: '文字提示1',
2: '文字提示2',
3: '文字提示3',
...
150: '文字提示150',
}
}
}
@by.Genesis：数据是动态绑定的啊，150只是打个比方呢
@酷酷k: 怎么个动态的你说啊
@by.Genesis: 项目A需要150个提示
项目B有1000个提示，这个数据是后端获取来的，不是固定死的呀
其他回答(1)
0
效果图
以下是源代码，简易版
