Add a hover class to a link while hovering on an SVG

Asked Jun 10 '15 at 17:04

Active Jun 10 '15 at 17:04

Viewed 36 times

I wish to add a hover class to add a style to a link on the page when I mouse over an SVG group. I have been searching around but cannot find a solution, I am pretty sure I can use snap.js but it seems a bit overkill as I only need to do it on a single link and there must be a simpler solution.

Thanks

Jquery:

 $('#largehand').hover(
          function(){ $('.link--urpi').addClass('hover') },
          function(){ $('.link--urpi').removeClass('hover') }
   )

HTML:

<g id="largehand">
    <path d="M311.854,102.928c-0.407,4.451,7.842,3.348,11.121,2.695c1.961-0.381,3.431-3.498,1.472-4.192
            l-12.171,1.116C312.1,102.533,311.826,102.832,311.854,102.928z"/>
<g>
<a class="link--urpi" href="#" ></a>

asked Jun 10 '15 at 17:04

MrThunder

Is there any reason why you would not use CSS for this? – lugreen Jun 10 '15 at 17:06
1

Seems to work fine. http://jsfiddle.net/isherwood/o5q5edjx/ Console errors? – isherwood Jun 10 '15 at 17:09
1

Your closing `g` tag is malformed. – isherwood Jun 10 '15 at 17:09
Ok I messed up, I was loading the svg into the page page with jquery and it was not working. But when i just added it inline directly into the HTML it worked fine. Thanks for the help. – MrThunder Jun 10 '15 at 17:25

Add a hover class to a link while hovering on an SVG

0 Answers0