Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript How to change SVG fill color with jQuery on hover?

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #42585
    VladimirKrstic
    Participant

    Hello good people,

    I need help with changing SVG fill color on hover with jQuery. Thing is that in one SVG i can have path, circle or polygon elements and wish to change color on fill attribute on them when that particular SVG is hovered. Color should reverse back when pointer is not hovering element. I think that adding CSS class to do that is not right way because its simple color change on hover and can be done with jQuery attr() function(i found that on web). Also i found here on forum that jQuery functions mousenter() and mouseleave() should be used for hover. But i didn’t menaged to write my code. :(

    To represent real world example:

    So can someone help me, how should my jQuery code look like to achive when you hover A that fill color of path, circle, polygon changes and reverse back when you unhover. Keep in mind that i have more of SVGs on page so this should change color only on path, circle,polygon that are under hovered A element. I found on web this has to do something with $(this) jQuery but still i could not manage to write good code. :(

    Thank you in advance,
    Vladimir

    #123956
    VladimirKrstic
    Participant

    Well i did it myself. I was failing on most stupid thing as it mostly be in coding… and in life. :) I didn’t targeted elements as they should be targeted. Here is the code if someone needs him.

    $(document).ready(function() {
    $(“a”).mouseenter(function() {
    $(this).find(“path, polygon, circle”).attr(“fill”, “#ccc”);
    });
    $(“a”).mouseleave(function() {
    $(this).find(“path, polygon, circle”).attr(“fill”, “#fff”);
    });
    });

    #123996
    VladimirKrstic
    Participant

    I’ve done it just with CSS with just one rule. On a very simple and smart ways CSS can handle lot of things. :) Here is code.

    a:hover path, a:hover polygon, a:hover circle {
    fill: red;
    }

    #124049
    Mottie
    Member

    Hi VladimirKrstic!

    I’m glad you figured this out!

    I was wondering though, I’ve had issues with getting Firefox to change the fill color, have you noticed this as well?

    #124052
    Paulie_D
    Member

    @VladimirKrstic That’s a great result…my first thought was through jQuery but knowing that it’s possible via CSS is an definite plus.

    I do wonder about browser support for the path/polygon/circle attributes though.

    Perhaps there’s an article in there for @chriscoyier

    #124090
    VladimirKrstic
    Participant

    I didn’t tested it in older browsers. Chrome 24, Firefox 18.02, Internet Explorer 10 and Opera 12.14 are all fine with it. Thought only Firefox can make CSS Transition on SVG attriributes. Chrome Canary 26 do the job too.

    #124097
    Chris Coyier
    Keymaster

    The `fill: red;` stuff needs to be in a `

    #124105
    VladimirKrstic
    Participant

    Nah, it works without

    #155830
    nimmolo
    Participant

    Vladi, does this only work with inline SVG…

    My SVG is called as a background-image in CSS, and I think that means I don’t have access to the ‘path’ DOM element, is that right?

    (by the way your example SVG seems not to be there anymore, i’m just guessing at your structure by inspecting element …)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.