javascript - JavaScript 中鼠标移出时恢复旧版 CSS

Question

我使用以下函数在标签上设置 CSS 样式:

function setStyle (styles = {}, tag){
    let key;
    for (key in styles) {
        if (!styles.hasOwnProperty(key))
           continue;
        tag.style[key] = styles[key];
    }
    return tag;
}

我创建了另一个函数，它将在鼠标悬停时应用新的 CSS 样式并在鼠标移出时恢复为旧的 CSS:

function hoverCss(styleSet = {}, tag) {
        const oldCss = tag.style;

        tag.onmouseover = () => {
            // console.info('APPLY NEW CSS');
            setStyle(styleSet, tag);
        };

        tag.onmouseleave = () => {
            // console.info('RESTORE OLD CSS');
            setStyle(oldCss, tag);
        };

        return tag;
    }

当我执行上面的代码时，新的 CSS 会在鼠标悬停时应用，但当鼠标离开时旧的 CSS 不会应用。请提供此错误的解决方案。

编辑

调用函数的其余代码如下所示:

const tag = document.getElementById('someId');
hoverCss({color:'red'}, tag);

感谢和问候

Answer 1

认为最好使用纯 CSS 来实现

.element {
  // Add your element styles here
}

.element:hover {
 // Add styles here to be applied when element is hovered over
}