zTree自定义样式图标---纯CSS样式实现

最新推荐文章于 2022-07-04 11:56:52 发布

IF_YOU_Qian

最新推荐文章于 2022-07-04 11:56:52 发布

阅读量2.9k

点赞数

分类专栏： layui css 文章标签： css

本文链接：https://blog.csdn.net/IF_YOU5849/article/details/106947217

版权

通过纯CSS样式覆盖，实现zTree的自定义图标效果。包括：隐藏默认图标，编写并引入新的CSS样式文件，以及使用字体文件（如layui字体）作为替代方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯CSS样式覆盖，实现zTree自定义样式图标

1 . 效果样式（如下）

在这里插入图片描述

2 . 修改设置，隐藏默认图标

var setting = {
   
   view: {
   
       showTitle: false,
       showLine: false,
       showIcon: false,//不展示图标
       selectedMulti: false,
       dblClickExpand: false,
       nameIsHTML: true,
       addDiyDom: addDiyDom,
       addHoverDom: addHoverDom,
       removeHoverDom: removeHoverDom,
   },
  }

3 . CSS样式覆盖（单独放置在css文件里，在zTree样式文件下引入）

 #ztree1 .ztree li a.curSelectedNode {
   
     background-color: #676666;
     color: #fff;
 }
 #ztree1 .ztree li a.curSelectedNode:hover{
   
     background-color: #676666;
     color: #fff;
 }
 #ztree1 .ztree li a:hover {
   
     background-color: #eee;
     color

最低0.47元/天解锁文章