从 jstree 更改 hover 上的路径 svg 颜色

Question

I have the following snippet:

 $('#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 icon folder:

<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 icon chevron:

<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>

Here is the expected result:

How can I change the color of the folder and arrow on hover? I try setting up a class on the svg path but the color doesn't change.

Answer 1

change the background image, on hover and put !important , so that it overrides the inline styling of icon.

.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>

by putting CurrentColor as the fill value, the svg will get the color property's value.

for example:

 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>

Now instead of putting the svg as a background or a source for an img element. you put it directly in your html like a normal element.