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

пытался найти код для симуляцииmouseover в Chrome, но хотя "Наведите курсор мыши на» слушатель уволен, CSSпарить» декларация никогда не устанавливается!

Я пытался также делать:

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

Но ничто не может изменить элемент к тому, что заявлено в егоhover декларация.

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

 JasonMArcher23 июл. 2014 г., 19:24
@Monk В OQ был включен тег jQuery. Это дубликат.
 Chuck Le Butt23 июл. 2014 г., 18:58
Это н'дубликат. Другой вопрос о jQuery. Этот вопрос о чистом JS.
 PSL21 июн. 2013 г., 04:30
@BenjaminGruenbaum Да, вы правы. Я неправильно понял.
 Chuck Le Butt23 июл. 2014 г., 21:41
@JasonMArcher Вопрос (и его ответ) о чистом JS. Ты не думаешь это?Скорее всего, они ошиблись.
 Benjamin Gruenbaum21 июн. 2013 г., 04:28
@PSL Я думаю, что он хочет сделать, это заставить:hover состояние на элемент.
 Pacerier19 мар. 2015 г., 15:42
@Chuck,Это дубликат. Увидетьstackoverflow.com/q/6406976/632951 который уже имеет 4k просмотров.

Ответы на вопрос(5)

Фон

пытаясь написать автоматические тесты, чтобы убедиться, что определенный набор элементов на каждой странице, которую все получают, имеет некоторый набор свойств css, установленных css для событий hover.

Хотя приведенный выше ответ прекрасно объясняет, почему JS не может просто вызвать событие hover, а затем получить доказательство некоторого значения css, представляющего интерес, он действительно отвечает на первоначальный вопрос "Как имитировать наведение мыши на чистый JavaScript, который активирует CSS?: «?» Зависать только частично.

отказ

Это не эффективное решение. Мы используем его только для автоматизированного тестирования, где производительность не имеет значения.

Решение
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 пустой строкой и применяет ее. Это приводит к тому, что применяются все стили наведения. Теперь можно проверить стиль вокала и вернуться в исходное состояние, остановив моделирование.

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

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

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

Это не эффективно, так что лучше нет. Если необходимо, вы можете проверить с помощью element.is (selectorOfInterest), применяется ли стиль для вашего элемента и использовать только эти стили.

пример

В Жасмин вы можете, например, Теперь выполните:

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");
    });
});
 FThompson16 янв. 2019 г., 09:43
Этот ответ великолепен! К сожалению, он не работает в последних версиях Chrome на страницах с таблицами стилей, обслуживаемыми другими хостами, из-за ограничения доступа Chrome к запросам разных источников. Смотрите мой ответ для решения, которое поддерживает это :)
 Amstutz16 янв. 2019 г., 09:45
@Vulcan, спасибо за подсказку и хорошее дополнение!
Решение Вопроса

доверенное событие.

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

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

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

 Benjamin Gruenbaum19 мар. 2015 г., 23:53
@Pacerier это 'не является доверенным событием, поскольку оно не было инициировано пользователем. Так сказанопрямо там в цитате выше в моем ответе. Это'Буквально с чего начинается ответ.
 Pacerier11 апр. 2015 г., 19:06
@ BenjaminGruenbaum, так вы говорите, что "фокус» на самом деле лазейка в безопасности а не стоит доверять?
 Pacerier19 мар. 2015 г., 15:47
@ Тим, это не такна самом деле ответитьЗачем, Это простоменяет вопрос.
 Benjamin Gruenbaum07 апр. 2015 г., 23:54
@Pacerier это было в нужном месте в нужное время - событиям, которым доверяют, доверяют только по историческим причинам, чтобы не нарушать совместимость между веб-сайтами. Они просто не позволяли то, что они могли сойти с рук. Задним числом всегда 20/20.
 Pacerier20 мар. 2015 г., 05:15
@BenjaminGruenbaum, я 'Я цитируюза исключением событий click или DOMActivate ", Что такого особенного в "парить» что это не такт в этом списке исключений? Почему мыразрешено звонитьфокус» но нет "парить»? На эти вопросы мы должны ответить, ответить на все остальное простоменяю вопрос.
 David07 апр. 2015 г., 23:01
Я бы предположил, что парить (и в сочетании с щелчком мыши или мыши вверх и вниз для перетаскивания падение), может вести себя или выглядеть как угонСистема (если вы игнорируете случаи автоматизации), поэтому она не идеальна для поддержки. Нажмите, я могуСкажем, фокусировка позволила бы автоматически сфокусироваться на целевом поле формы или элементе, на котором дизайнер сайта хочет, чтобы пользователь сфокусировался, например, на текстовом поле с отсутствующими или неверными данными (например, проверками проверки поля формы). Но это'только мои предположения.
 Benjamin Gruenbaum11 апр. 2015 г., 19:22
Да, как бы абсурдно это ни звучало, вы можете создать впечатление, что фокус был вызван взаимодействием с пользователем там, где его не было. На практике - API-интерфейсы браузера с радостью не подчиняются спецификации, игнорируют фокус и щелкают как ненадежные события (по крайней мере, Chrome). Попробуйте, например, смоделировать нажатие на кнопку установки расширения для расширения Chrome и посмотрите, что произойдет :)

Ты можешь использоватьПсевдо: стайлербиблиотека, которая может применять псевдоклассы 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 страницы.

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

используя javascript .. и присоединяю тот жеCSS как:hover к этому классу

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

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

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

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

вы, конечно, должны использоватьonmouseout удалить "зависли» класс, когда вы покидаете элемент ...

 Yotam Omer21 июн. 2013 г., 04:43
не достаточно хорош..
 Yotam Omer21 июн. 2013 г., 04:25
@ Понятно, что вопрос требует чистого javascript .. как иначе можно прикрепить события?
 Pointy21 июн. 2013 г., 04:35
Ну естьaddEventListener() для современных браузеров, для начала ...
 Pointy21 июн. 2013 г., 04:11
Это не будет делать то, что просит ОП, хотяВероятно, более или менее вдоль правильных линий. Было бы лучше использовать современные методы прикрепления обработчиков событий.
 Pointy21 июн. 2013 г., 16:07
Не достаточно хорош? Это "чистый» JavaScript, и он фактически прикрепит функцию как обработчик для события. В Internet Explorer (почти) эквивалентattachEvent() будет использоваться.
 Benjamin Gruenbaum21 июн. 2013 г., 23:14
Стоит отметить. Поддержка IE9 и 10addEventListener и это'лучший способ прикрепить события, ShimmingattachEvent нужен только в IE8 (и ниже). Йотам, если он добавит еще один обработчикonmouseover установив атрибут напрямую (а не добавив прослушиватель событий), он переопределит текущее установленное событие. Увидетьэтот вопрос на разницу.
 Yotam Omer21 июн. 2013 г., 04:12
извините, неправильно понял вопрос
 Yotam Omer21 июн. 2013 г., 04:22
отредактировано - теперь это должно работать - как бы то ни былоS обход

Ваш ответ на вопрос