Handling mouseover adding class, mouseleave, removing class and onclick adding a different class name

Question

I have been trying to create a custom function that handles click, mouseover, and mouseleave but if I add onlick the mouseover function won't work. I have tried to apply this but it didn't work either so far I only managed to make the mouseover and have no idea how to include the rest of the functions.

Once Button Hovered
Add Class "push_left_side_btn" to id "left_side" and "push_right_side_btn" to id "right_side"
Once mouseleave remove both classes
Once Clicked add div with a class

function close_store_btn() {
    var element = document.getElementById("left_side");
    element.classList.remove("push_left_side_btn");
    var element = document.getElementById("right_side");
    element.classList.remove("push_right_side_btn");
}

<button onmouseover="close_store_btn()" class="close_clean_wrap">
    <svg width="43px" height="34px" viewBox="0 0 43 34" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.6">
            <g id="close_gv_btn" fill="#000000" fill-rule="nonzero" stroke="#FFD79F">
                <g id="left_side" transform="translate(0.857988, 0.236686)">
                    <polygon id="bot_left"
                        transform="translate(15.952663, 24.452663) rotate(90.000000) translate(-15.952663, -24.452663) "
                        points="23.9053254 39.9526627 19.9550819 39.9526627 8 8.95266272 12.4092888 8.95266272 22.3642809 35.6829353">
                    </polygon>
                    <polygon id="top_left"
                        transform="translate(15.952663, 8.500000) scale(1, -1) rotate(90.000000) translate(-15.952663, -8.500000) "
                        points="23.9053254 24 19.9550819 24 8 -7 12.4092888 -7 22.3642809 19.7302726"></polygon>
                </g>
                <g id="right_side" transform="translate(10.500000, 0.236686)">
                    <polygon id="bot_right"
                        transform="translate(16.000000, 24.500000) scale(-1, 1) rotate(90.000000) translate(-16.000000, -24.500000) "
                        points="24 40 20.0262431 40 8 9 12.4355345 9 22.4497826 35.7302726"></polygon>
                    <polygon id="top_right"
                        transform="translate(16.000000, 8.500000) scale(-1, -1) rotate(90.000000) translate(-16.000000, -8.500000) "
                        points="24 24 20.0262431 24 8 -7 12.4355345 -7 22.4497826 19.7302726"></polygon>
                </g>
            </g>
        </g>
    </svg>
</button>

score 0 · Answer 1 · edited Dec 31 '20 at 06:09

0

You should add the event listener in order to add those functions.

For example, you are selecting the button, but you are not defining the events.

Try the below:

<button id="btn" class="close_clean_wrap">
    Svg Content Here
</button>

And for JS:

var element = document.getElementById("left_side");
var element2 = document.getElementById("right_side");
document.getElementById('btn').addEventListener('mouseover', () => {
    //For removing classes
    element.classList.remove("push_left_side_btn");
    element2.classList.remove("push_right_side_btn");

});

document.getElementById('btn').addEventListener('mouseout', () => {
    //For adding classes
    element.classList.add("push_left_side_btn");
    element2.classList.add("push_right_side_btn");
});

edited Dec 31 '20 at 06:09

Shahnawaz Hossan

2,695
2
13
24

answered Dec 31 '20 at 06:03

Arjun Kanungo

131
6

I have tried this but it didn't work I guess because it was trying to get the id from the svg which can't be reached. The idea is when you hover the button you dive into the svg and get id then give them a class to animation like a path or something. – CTRL-In-Knowledge Dec 31 '20 at 06:09
May I know why u r adding ID to SVG components? Or else, can u explain a bit on your requirement?? – Arjun Kanungo Dec 31 '20 at 06:15
I am simply trying to control some of them, if there's a better way to control them please let me know. – CTRL-In-Knowledge Dec 31 '20 at 06:17
Are you trying to move individual polygons inside the SVG? – Arjun Kanungo Dec 31 '20 at 06:29
Yes, I have also edited my post into the steps that I want to achieve. – CTRL-In-Knowledge Dec 31 '20 at 06:31
Unfortunately you cannot manipulate in such a way. because you cannot add classes to those Vector Graphics, you can only apply it to the whole Element which is the SVG element itself. However you can try to transform or translate those elements, the following post can help [How to transform](https://stackoverflow.com/questions/10349811/how-to-manipulate-translate-transforms-on-a-svg-element-with-javascript-in-chrom) – Arjun Kanungo Dec 31 '20 at 06:50
So far I have only managed to make it work either onclick, onmouseover or our mouseleave but I cannot seem to combine them all into one function, somehow it always breaks. – CTRL-In-Knowledge Dec 31 '20 at 06:57

Handling mouseover adding class, mouseleave, removing class and onclick adding a different class name

1 Answers1