Возврат к старому CSS при наведении мыши на JavaScript

Question

Я использую следующую функцию для установки CSS стилей на TAG:

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

Я создал другую функцию, которая будет применять новый стиль CSS при наведении курсора и возвращаться к старому CSS при mouseout:

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;
    }

Когда я выполняю вышеуказанный код, New CSS применяется к Mouse Over, но старый CSS не применяется обратно, когда Mouse Leave. Пожалуйста, предоставьте решение для этой ошибки.

РЕДАКТИРОВАТЬ

Остальная часть кода для вызова функций выглядит следующим образом:

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
}

Answer 2

Это происходит потому, что js угрожает объекту по ссылке, поэтому, когда вы делаете const oldCss = tag.style, объект oldCss указывает на тот же адрес памяти, что и tag.style

Так, когда вы изменяете какой-либо атрибут на tag.style он меняется на oldCss на, объявление const просто говорит, что вы не можете изменить старое значение Css, не дочерние

Вам придется сделать const oldCss = JSON.parse(JSON.stringify(tag.style)), чтобы избежать эталонное поведение

Answer 3

Вы должны объявить свой старый Css объект за пределами функции, как показано ниже, чтобы решить вашу проблему

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

    function hoverCss(styleSet = {}, tag) {
        elementStyle = tag.style;
        oldCss = {}
        var computedStyle = window.getComputedStyle(tag, null);
        // get the default css as object and keep it 
        for (prop in elementStyle) {
            if (elementStyle.hasOwnProperty(prop)) {
                oldCss[prop] = elementStyle[prop];
            }
        }
        // If the newCss has something isn't in the oldcss so keep that as empty
        for (let property in styleSet) {
            if (!oldCss.hasOwnProperty(property)) {
                oldCss[property] = '';
            }
        }
        tag.addEventListener('mouseenter', function () {
            setStyle(styleSet, this);
        });

        tag.addEventListener('mouseout', function () {
            setStyle(oldCss, this);
        });

        return tag;
    }

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

Я понимаю, что вы идете этим путем, может быть, потому что вам нужно контролировать css используя JS

Answer 4

Попробуйте использовать этот синтаксис

target.addEventListener('mouseleave', () => {
  setStyle(oldCss, tag);
});