0

I have a SVG image wrapped in container and a href wrapper. I would like to change the SVG fill path on hover. I was trying this but it's not working.

<a class="category" href="#">
<div class="category-item-wrapper">
    <svg class="svg" height="512" width="512" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Axle</title>
        <rect fill="none" height="94.592593" id="canvas_background" width="94.592593" x="-1" y="-1"></rect>
    </g>
    <g>
        <path d="m360.007032,159.628358l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.493429c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.100718,0c-4.780607,-8.251198 -13.684914,-13.817814 -23.906831,-13.817814s-19.126224,5.566616 -23.906831,13.817814l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.851734l66.685478,0c2.266896,3.53894 5.319802,6.512105 8.911902,8.703059l0,113.4891c-20.884303,6.185551 -36.133641,25.490241 -36.133641,48.383234c0,22.892993 15.249338,42.197684 36.133641,48.383234l0,7.431015c-3.945235,2.407391 -7.23736,5.764068 -9.557417,9.76626l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.847937l66.685478,0c4.913507,7.670235 13.483665,12.758411 23.261316,12.758411s18.34781,-5.091973 23.261316,-12.754613l66.75003,0l0,16.847937c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.489632c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.104515,0c-2.320056,-4.005989 -5.612182,-7.358869 -9.557417,-9.76626l0,-7.431015c20.884303,-6.185551 36.133641,-25.490241 36.133641,-48.383234c0,-22.892993 -15.249338,-42.197684 -36.133641,-48.383234l0,-113.492897c3.5921,-2.190953 6.645006,-5.164119 8.911902,-8.703059l66.75003,0l0,16.851734c-0.003797,4.173063 3.413634,7.590495 7.590495,7.590495zm-71.538231,146.133164c0,14.394981 -11.66863,26.06361 -26.06361,26.06361s-26.06361,-11.66863 -26.06361,-26.06361c0,-14.394981 11.66863,-26.06361 26.06361,-26.06361s26.06361,11.66863 26.06361,26.06361z" fill="#143856" id="svg_1" stroke="null"></path>
    </g></svg> <span>Axle</span>
</div>
</a>

My CSS: 

.category>.svg path:hover{
  fill:red;
}

Any advice would be appreciated.

xKobalt
  • 1,498
  • 2
  • 13
  • 19
Alex
  • 29
  • 4
  • 2
    The SVG is not a direct child (`>`) of the link. Try `.category > div > .svg path:hover` or `.category-item-wrapper >.svg path:hover` – Paulie_D Feb 28 '20 at 12:13

2 Answers2

3

.category .svg:hover path {fill: red;}

m_sultan
  • 433
  • 5
  • 14
0

.category:hover svg #svg_1 {
    fill: red !important;
}

.category svg #svg_1 {
    transition: .5s all;
}
<a class="category" href="#">
<div class="category-item-wrapper">
    <svg class="svg" height="512" width="512" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Axle</title>
        <rect fill="none" height="94.592593" id="canvas_background" width="94.592593" x="-1" y="-1"></rect>
    </g>
    <g>
        <path d="m360.007032,159.628358l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.493429c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.100718,0c-4.780607,-8.251198 -13.684914,-13.817814 -23.906831,-13.817814s-19.126224,5.566616 -23.906831,13.817814l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.851734l66.685478,0c2.266896,3.53894 5.319802,6.512105 8.911902,8.703059l0,113.4891c-20.884303,6.185551 -36.133641,25.490241 -36.133641,48.383234c0,22.892993 15.249338,42.197684 36.133641,48.383234l0,7.431015c-3.945235,2.407391 -7.23736,5.764068 -9.557417,9.76626l-66.039963,0l0,-16.95046c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,62.493429c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-16.847937l66.685478,0c4.913507,7.670235 13.483665,12.758411 23.261316,12.758411s18.34781,-5.091973 23.261316,-12.754613l66.75003,0l0,16.847937c0,4.176861 3.417431,7.594292 7.594292,7.594292l20.527371,0c4.176861,0 7.594292,-3.417431 7.594292,-7.594292l0,-62.489632c0,-4.176861 -3.417431,-7.594292 -7.594292,-7.594292l-20.527371,0c-4.176861,0 -7.594292,3.417431 -7.594292,7.594292l0,16.95046l-66.104515,0c-2.320056,-4.005989 -5.612182,-7.358869 -9.557417,-9.76626l0,-7.431015c20.884303,-6.185551 36.133641,-25.490241 36.133641,-48.383234c0,-22.892993 -15.249338,-42.197684 -36.133641,-48.383234l0,-113.492897c3.5921,-2.190953 6.645006,-5.164119 8.911902,-8.703059l66.75003,0l0,16.851734c-0.003797,4.173063 3.413634,7.590495 7.590495,7.590495zm-71.538231,146.133164c0,14.394981 -11.66863,26.06361 -26.06361,26.06361s-26.06361,-11.66863 -26.06361,-26.06361c0,-14.394981 11.66863,-26.06361 26.06361,-26.06361s26.06361,11.66863 26.06361,26.06361z" fill="#143856" id="svg_1" stroke="null"></path>
    </g></svg> <span>Axle</span>
</div>
</a>
Mehul Davara
  • 321
  • 2
  • 4