vue+iview中tree树形组件覆盖点击背景色和鼠标移入背景色

vue+iview中tree树形组件覆盖点击背景色和鼠标移入背景色

1.开发环境 vue+iview
2.电脑系统 windows10专业版
3.在使用vue+iview开发的过程中,我们根据需求会使用到树形组件,下面我来分享一下,希望对你有所帮助~!
4.在template中添加如下代码:

5.效果图如下:

注意:第一个 背景色是鼠标移入的效果,第二个背景色 是点击之后的效果

6.我们会感觉这个样式会比较难看,怎么覆盖默认的样式呢?代码如下:

.ivu-tree-title-selected,.ivu-tree-title-selected:hover{
  background-color: rgb(81, 97, 187) !important;
}

.ivu-tree-title:hover{
  background-color: rgb(81, 97, 187) !important
}

7.覆盖之后的效果图如下:

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰!