Mit jQuery, Veränderung SVG Farbe auf Hover über verschiedenes Element

Question

Ich habe einen Link, der wie folgt aussieht:

Die Spitze ist ein Link svg und der Boden ist ein Anker. Da Sie keine Eltern in CSS ansprechen können, versuche ich, die Farbe der SVG zu ändern, wenn ich den Mauszeiger über den Link darunter bewege. Ich versuche das mit jQuery zu machen, habe aber noch kein Glück gehabt, hoffentlich könnt ihr mir helfen. Ich muss das DOM hochgehen und dann einen anderen Child-Pfad.

Ich habe versucht, .on (‚Mouseover‘, Funktion .... und ich habe versucht, .hover()

Ich habe auch versucht, alles mit einem Anker Link umgibt, aber ich denke, man kann es nicht HTML-Code in HTML Der Browser schließt den Link sofort

Ich habe auch versucht, eine CSS-Klasse zur SVG hinzuzufügen, mit dem gleichen CSS, das mit: Hover funktioniert, obwohl ich den "fill" -Wert sehe ändern, wenn die Kontrolle, die Farbe einfach nicht.

HTML

<div class="tag-container test-container"> 
    <div class="top clearfix"> 
    <!--?xml version="1.0" encoding="UTF-8" standalone="no"?--> 
    <svg width="41px" height="48px" viewBox="0 0 41 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch --> 
    <title style="fill: rgb(147, 147, 147);">filter-icn-bedbug</title> 
    <desc style="fill: rgb(147, 147, 147);">Created with Sketch.</desc> 
    <defs style="fill: rgb(147, 147, 147);"></defs> 
    <g id="Pest-Peeve-Web" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" style="fill: rgb(147, 147, 147);"> 
     <g id="Shopfront" transform="translate(-402.000000, -706.000000)" fill="#C8C8C8"> 
      <g id="filter-icn-pest" transform="translate(154.000000, 698.000000)"> 
       <path d="M284.00492,32.6228518 L280.670988,31.5488791 C280.795828,31.9789813 280.909553,32.4236196 281.008742,32.8870696 L284.00492,32.9871132....a lot of code..... 278.646173,11.2639638 278.483709,11.2639638 C278.230607,11.2639638 277.980925,11.1459636 277.822737,10.9244995 L277.822737,10.9244995 Z" id="filter-icn-bedbug"></path> 
      </g> 
     </g> 
    </g> 
</svg> 
</div> 
    <div class="bottom"> 
     <a title="Show products matching tag Bedbugs" href="/collections/all/bedbugs">Bedbugs</a> 
    </div> 
</div> 

CSS (SASS)

.blue-hover { 
    path {fill: $PPblue;} 
} 

JavaScript

$(document).ready(function() { 
    $(".test-container a").on('mouseover', function() { 
     $(this).closest('.tag-container').find('svg').children().css({'fill': '#0BACFF'}); 
    }); 
    $(".test-container a").on('mouseleave', function() { 
     $(this).closest('.tag-container').find('svg').children().css({'fill': '#939393'}); 
    }); 
}); 

Nach etwas Hilfe zu bekommen, ist es das, was schließlich

$(document).on({ 
    mouseenter: function() { 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#0BACFF'}); 
    }, 
    mouseleave: function() { 
     $(this).closest('.tag-container').find('svg path').css({'fill': '#939393'}); 
    } 
}, ".test-container a"); 

Answer 1

versuchen diese gearbeitet ..

$(document).on({ 
    mouseenter: function() { 
     //change color on mouse enter 
    }, 
    mouseleave: function() { 
     //change color on mouse leave 
    } 
}, ".test-container a");