如何仅在鼠标悬停时在树节点的右端显示一个小图标
如何仅在鼠标悬停时在树节点的右端显示一个小图标
提问于 2018-11-03 15:27:47
我正尝试在同一树节点上的鼠标悬停上显示一个图标。
Vue.component('tab', {
props:[],
data() {
return{
data: [{
label: 'Level one 1',
children: [{
label: 'Level two 1-1'
}]
}, {
label: 'Level one 2',
children: [{
label: 'Level two 2-1'
}, {
label: 'Level two 2-2'
}]
}, {
label: 'Level one 3',
children: [{
label: 'Level two 3-1'
}, {
label: 'Level two 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
methods: {
},
template: `<el-tree :data=data :props="defaultProps"></el-tree>`
})
var vm=new Vue({
el: '#app',
})一个小图标应该是可见的，如下图所示。
这就是问题所在：https://jsfiddle.net/8hdm2ykb/
回答 1
Stack Overflow用户
发布于 2018-11-06 04:08:45
将以下内容添加到css中
.el-tree-node__content:hover {
background-image: url(https://i.imgur.com/RZfgbVH.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: 50px 100%;
}https://jsfiddle.net/8hdm2ykb/12/
将background-image替换为您想要显示的图像，并将background-size设置为您自己的要求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53129329
复制相关文章
相似问题
腾讯云开发者
