Как смоделировать наведение курсора на чистый JavaScript, который активирует CSS «: hover»?

Я пытался найти код для моделирования mouseoverв Chrome, но даже несмотря на то, что слушатель «mouseover» запускается, объявление CSS «hover» никогда не устанавливается!

Я также пробовал делать:

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

Но, похоже, ничто не меняет элемент на то, что объявлено в его hoverобъявлении.

Это возможно?

Вы не можете. Это не заслуживающее доверия событие .

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

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

Вам нужно добавить класс и добавить / удалить его в событиях mouseover / mouseout вручную.

Вы можете смоделировать событие наведения указателя мыши следующим образом:

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 пустой строкой и применяет ее. В результате применяются все стили: hover. Теперь можно проверить какой-либо стиль и вернуться в исходное состояние, остановив моделирование.

Почему мы применяем эффект наведения для всего документа, а не только для интересующего элемента, получая из листов и затем выполняя element.css (...)?

Таким образом, стиль будет применен встроенным, это переопределит другие стили, которые не могут быть переопределены исходным стилем наведения CSS.

Как бы я теперь смоделировал наведение для одного элемента?

Это неэффективно, так что лучше не надо. При необходимости вы можете проверить с помощью element.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чтобы удалить "зависший" класс, когда вы покидаете элемент ...

Вы можете использовать pseudo: styler , библиотеку, которая может применять псевдоклассы 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, но как только вы переместите указатель мыши обратно в инструменты разработчика, событие больше не будет активным для этого элемента html. Вы, вероятно, хотели бы иметь что-то вроде опции: hover в devtools для ваших событий javascript. Этого не существует, но вы можете смоделировать это.

1. Откройте свои инструменты разработчика и щелкните его, чтобы сделать его активным.
2. Запустите событие для интересующего вас элемента.
3. Не перемещая мышь, откройте панель команд devtools с помощью ctrl + shift + p и выберите «отключить javascript» с помощью клавиатуры.

Поскольку javascript отключен, у него нет возможности снова изменить элемент (ы). Вы можете перейти в инструменты разработчика и проверить CSS и HTML так, как если бы вы зависали, щелкали или делали с ними что-то еще. После того, как вы закончите, снова перейдите в командную панель и выберите «включить javascript».