Можно ли прослушать изменение стиля, вызванное файлом стиля .css, из JavaScript? ⇐ Html

[Anonymous]

Прежде всего, прошу прощения за то, что я такой новичок в этой области, потому что, хотя у меня есть некоторый опыт, многие темы JavaScript, jQuery, css мне неизвестны.
Вещь заключается в том, что мне нужно прослушивать изменения стиля, которые инициируются через мой CSS-файл стиля.
Мой пример .html:

Код: Выделить всё

My text

Мой пример .css:

Код: Выделить всё

.test:not(:hover) {
background: #000;
}

.test:hover {
background: #2ca464;
}

И в моем .js я хотел бы послушать изменение цвета фона.
Я использую довольно старую версию jquery: jquery -1.11.1

• Я пытался прослушивать изменения атрибутов, реализованные плагином attrchange:
  https://stackoverflow.com/a/21507405/5698125

И я обнаружил, что когда изменения вносятся программно, это работает, но когда они не создаются программно, прослушиватель никогда не вызывается.

• Я также пытался взломать функцию DOM setAttribute, описанную по адресу:
  https://stackoverflow.com/a/71838385/5698125 безуспешно
• И, наконец, я тоже попробовал MutationObserver ( объяснено на https://stackoverflow.com/a/43547684/5698125), вот так:

Код: Выделить всё

// https://stackoverflow.com/a/43547684/5698125
function listenToAttributeChange(myDollarThis, attributeName, myCallbackFunction) {
const target = myDollarThis[0];
var observer = new MutationObserver(function(mutations) {
myCallbackFunction(myDollarThis);
});

observer.observe(target, {
attributes: true,
attributeFilter: [attributeName] });
}

function listenToAttributeChangeForSelector(mySelector, attributeName, myCallbackFunction) {
$(mySelector).each(function () {
listenToAttributeChange($(this), attributeName, myCallbackFunction);
});
}

// and invoking it like this:
var myListener = function(myDollarThis) {
if (myDollarThis.css("background-color") ...) ...
};

listenToAttributeChangeForSelector(".test", "style", myListener);

Я мог бы проверить, что myHoverFunction вызывается, когда изменение моего элемента выполняется программно, например, когда вызывается этот код:

Код: Выделить всё

    $( ".test" ).each( function() {
$( this ).css("background", "rgb(0, 0, 0)");
});

Но он не вызывается, когда изменение осуществляется через стиль .css.
Кто-нибудь знает, есть ли способ прослушивать изменения стиля, которые выполняются не программно, а относительно моего файла стиля .css?

Подробнее здесь: https://stackoverflow.com/questions/793 ... javascript