Change path svg color on hover from jstree-CodePudding

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"  viewBox="0 0 20 20" fill="none">
  <path id="test123" fill="#ddecfa"  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"  fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path id="test123456"  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.

CodePudding user response：

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

CodePudding user response：

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 20 20" fill="none">
  <path id="test123" fill="CurrentColor"  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"  fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path id="test123456"  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"  viewBox="0 0 20 20" fill="none">
  <path id="test123" fill="CurrentColor"  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.