处理 mouseover 添加类、mouseleave、删除类和 onclick 添加不同的类名

Question

我一直在尝试创建一个处理单击、鼠标悬停和鼠标离开的自定义函数，但是如果我添加 onlick，则鼠标悬停函数将不起作用。 我曾尝试申请this，但到目前为止它也不起作用，我只设法使鼠标悬停并且不知道如何包含其余功能。

1. 按钮悬停一次
2. 将“push_left_side_btn”类添加到 id“left_side”，将“push_right_side_btn”添加到 id“right_side”
3. 一旦 mouseleave 删除两个类
4. 点击后添加带有类的 div

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>

Answer 1

您应该添加事件侦听器以添加这些功能。

例如，您正在选择按钮，但您没有定义事件。

试试下面的：

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

对于 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");
});