在jstree中悬停时更改路径svg颜色

Question

我有以下片段：

​

$('#myTree').jstree({
        'core' : {
            'data' : [
                {
                    "text" : "Root node",
                    "children" : [
                        {
                            "text" : "Child node 1",
                        },
                        { "text" : "Child node 2" }
                    ]
                }
            ]
        },
    "types" : {
      "default" : {
        "icon" : "https://svgshare.com/i/jkA.svg"
      },
      "demo" : {
        "icon" : "https://svgshare.com/i/jkA.svg"
      }
    },
    "plugins" : [ "types", "wholerow" ]
});

.jstree_folderIcon:hover{
  /*fill: #ddecfa !important*/
    /*fill: #4c5773 !important*/
    color:red;
}
.jstree-node .jstree-icon.jstree-ocl {
  background-image: url('https://svgshare.com/i/jiz.svg');
  background-size: 22px 22px;
  background-position: center !important;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
}
.jstree-node.jstree-open > .jstree-icon.jstree-ocl {
  transform: rotate(90deg);
}
#test123:hover{
  color:red;
    fill: red
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>


<div id="myTree"></div>

​

SVG图标文件夹：

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="none">
  <path id="test123" fill="#ddecfa" class="jstree_folderIcon" d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>

SVG图标雪佛龙：

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path id="test123456" class="jstree_chevronIcon" style="color:#ddecfa;" stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>

以下是预期的结果：

​

如何在悬停时更改文件夹和箭头的颜色？我尝试在svg路径上设置一个类，但是颜色没有改变。

Answer 1

更改背景图像，在悬停和放置!important，以便它覆盖图标的内联样式。

.jstree-wholerow-hovered ~ .jstree-anchor > .jstree-icon,
.jstree-wholerow-hovered + .jstree-icon {
    background-image:linear-gradient(red,blue) !important;
}

Answer 2

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="none">
  <path id="test123" fill="CurrentColor" class="jstree_folderIcon" d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path id="test123456" class="jstree_chevronIcon" fill="CurrentColor" stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
</svg>

通过将CurrentColor作为填充值，svg将获得color属性的值。

例如：

​

svg {
  width: 5rem;
  color: red
}

svg:hover {
  color: blue
}

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="none">
  <path id="test123" fill="CurrentColor" class="jstree_folderIcon" d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
</svg>

​

现在，不要将svg作为img元素的背景或源。您可以像普通元素一样将其直接放到html中。