Як я змоделюю наведення курсору на чистому JavaScript, який активує CSS “: наведення”?

Я намагався знайти код для імітації mouseoverв Chrome, але, незважаючи на те, що слухач "наведення курсора" запускається, декларація CSS "наведення" ніколи не встановлюється!

Я спробував також зробити:

//Called within mouseover listener
theElement.classList.add("hover");

Але, здається, ніщо не змінює елемент на те, що заявлено в його hoverдекларації.

Чи можливо це?

Ви не можете. Це не довірена подія .

Події, що генеруються користувальницьким агентом, або в результаті взаємодії з користувачем, або як безпосередній результат змін у DOM, довіряються користувацькому агенту з привілеями, які не надаються подіям, згенерованим сценарієм за допомогою DocumentEvent.createEvent ("Подія") метод, модифікований за допомогою методу Event.initEvent () або відправлений через метод EventTarget.dispatchEvent (). Атрибут isTrusted довірених подій має значення true, тоді як ненадійні події мають значення атрибута isTrusted значення false.

Більшість ненадійних подій не повинні ініціювати дії за замовчуванням , за винятком подій click або DOMActivate.

Вам потрібно додати клас і додавати / видаляти це в подіях наведення / наведення миші вручну.

Ви можете імітувати подію наведення курсору так:

HTML

<div id="name">My Name</div>

JavaScript

var element = document.getElementById('name');
element.addEventListener('mouseover', function() {
  console.log('Event triggered');
});

var event = new MouseEvent('mouseover', {
  'view': window,
  'bubbles': true,
  'cancelable': true
});

element.dispatchEvent(event);

Передумови

Я наткнувся на це питання, намагаючись написати автоматизовані тести, щоб переконатися, що певний набір елементів на даній сторінці, які всі отримують, має певний набір властивостей css, встановлених css для подій при наведенні.

Хоча наведена вище відповідь прекрасно пояснює, чому неможливо просто викликати подію наведення за допомогою JS, а потім перевірити якесь значення css, яке цікавить, воно відповідає на початкове запитання "Як я змоделюю наведення курсору на чистому JavaScript, який активує CSS" : hover ”?" лише частково.

Застереження

Це не ефективне рішення. Ми використовуємо його лише для автоматизованого тестування, де продуктивність не турбує.

Рішення

simulateCssEvent = function(type){
    var id = 'simulatedStyle';

    var generateEvent = function(selector){
        var style = "";
        for (var i in document.styleSheets) {
            var rules = document.styleSheets[i].cssRules;
            for (var r in rules) {
                if(rules[r].cssText && rules[r].selectorText){
                    if(rules[r].selectorText.indexOf(selector) > -1){
                        var regex = new RegExp(selector,"g")
                        var text = rules[r].cssText.replace(regex,"");
                        style += text+"\n";
                    }
                }
            }
        }
        $("head").append("<style id="+id+">"+style+"</style>");
    };

    var stopEvent = function(){
        $("#"+id).remove();
    };

    switch(type) {
        case "hover":
            return generateEvent(":hover");
        case "stop":
            return stopEvent();
    }
}

Пояснення

generateEvent читає всі файли css,, замінює: hover порожнім рядком і застосовує його. Це призводить до того, що застосовуються стилі all: hover. Тепер можна зондувати стиль з висотою і повернутися до початкового стану, зупинивши моделювання.

Чому ми застосовуємо ефект наведення для всього документа, а не лише для цікавить елемента, отримуючи з аркушів, а потім виконуємо element.css (...)?

Якщо зробити це, стиль буде застосовано вбудовано, це замінить інші стилі, які можуть не бути замінені оригінальним стилем наведення курсора css.

Як я тепер змоделюю наведення для одного елемента?

Це не ефективно, тому краще не робіть. Якщо потрібно, ви можете перевірити елемент.is (selectorOfInterest), чи застосовується стиль до вашого елемента, і використовувати лише ці стилі.

Приклад

У Jasmine ви можете, наприклад, зараз виконати:

describe("Simulate CSS Event", function() {
    it("Simulate Link Hover", function () {
      expect($("a").css("text-decoration")).toBe("none");
      simulateCssEvent('hover');
      expect($("a").css("text-decoration")).toBe("underline");
      simulateCssEvent('stop');
      expect($("a").css("text-decoration")).toBe("none");
    });
});

У цьому випадку я зазвичай роблю додавання класу за допомогою javascript .. і приєднання до цього класу того самого CSS, що :hoverі

Спробуйте використовувати

theElement.addEventListener('onmouseover', 
    function(){ theElement.className += ' hovered' });

Або для старих браузерів:

theElement.onmouseover = function(){theElement.className += ' hovered'};

вам, звичайно, доведеться використовувати, onmouseoutщоб видалити клас "зависання", коли ви залишаєте елемент ...

Ви можете використовувати псевдо: стилер , бібліотеку, яка може застосовувати псевдокласи CSS до елементів.

(async () => {
  let styler = new PseudoStyler();
  await styler.loadDocumentStyles();
  document.getElementById('button').addEventListener('click', () => {
    const element = document.getElementById('test')
    styler.toggleStyle(element, ':hover');
  })
})();

Застереження: Я є співавтором цієї бібліотеки. Ми розробили його для додаткової підтримки таблиць стилів з перехресним походженням, спеціально для використання в розширеннях Chrome, де, ймовірно, вам не вистачає контролю над правилами CSS сторінки.

Я припускаю, що ви хочете перевірити CSS після маніпулювання dom, але як тільки ви повернете курсор миші до devtools, подія більше не активна для цього елемента html. Напевно, ви хотіли б мати щось на зразок: hover у devtools для ваших подій javascript. Цього не існує, але ви можете змоделювати це.

1. Відкрийте ваші devtools і клацніть на ньому, щоб зробити його активним.
2. Активуйте подію на елементі, який вас цікавить.
3. Не рухаючи мишу, відкрийте командну панель devtools за допомогою комбінації клавіш ctrl + shift + p та виберіть на клавіатурі «вимкнути javascript».

Оскільки javascript вимкнено, він не має можливості змінити елементи знову. Ви можете перейти до devtools і перевірити css та html так, ніби ви наводили на них курсор, клацали або робили щось інше. Закінчивши, знову перейдіть до командної панелі та виберіть "увімкнути javascript".