[JQUERY] "가져가"어떻게 CSS를 활성화 순수 자바 스크립트에 마우스 오버를 시뮬레이션 할 수 있습니까?

"가져가"어떻게 CSS를 활성화 순수 자바 스크립트에 마우스 오버를 시뮬레이션 할 수 있습니까?

해결법

1. ---

   1.당신은 할 수 없습니다. 그것은 신뢰할 수있는 이벤트가 아니다.

   당신은 할 수 없습니다. 그것은 신뢰할 수있는 이벤트가 아니다.

   당신은 클래스를 추가하고 그 마우스 오버 /로 마우스 이벤트에 수동 / 제거를 추가해야합니다.

2. ---

   2.이 같은 마우스 오버 이벤트를 시뮬레이션 할 수 있습니다 :

   이 같은 마우스 오버 이벤트를 시뮬레이션 할 수 있습니다 :

   HTML

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

   자바 스크립트

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

3. ---

   3.특정 페이지 요소의 특정 세트를 모두 가져가 이벤트에 대한 CSS를 설정 CSS 속성의 일부 세트가받을 수, 확인, 자동화 된 테스트를 작성하는 동안 나는이 질문에 비틀 거렸다.

   특정 페이지 요소의 특정 세트를 모두 가져가 이벤트에 대한 CSS를 설정 CSS 속성의 일부 세트가받을 수, 확인, 자동화 된 테스트를 작성하는 동안 나는이 질문에 비틀 거렸다.

   위의 대답은 완벽하게 설명하고 있지만 단순히 JS으로 가져가 이벤트를 트리거 한 후 관심의 일부 CSS 값을 조사 할 수없는 이유, 그것은 "나는 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 파일, 대체 읽 빈 문자열로 가져가하고 적용합니다. 호버 스타일이 적용됩니다 :이 모든 것이 효과가 있습니다. 이제 하나는 howered 스타일과 시뮬레이션을 중지하여 초기 상태로 설정 다시 목록을 조사 할 수 있습니다.

   왜 우리는 전체 문서에 대한 호버 효과를 적용 할뿐 아니라 시트에서하는 방법을 사용합니다 관심있는 요소에 대한 다음 element.css을 수행 (...)?

   그 같은 완료, 스타일이 적용 인라인 것, 이것은 원래의 CSS 호버 스타일에 의해 오버라이드 (override)하지 않을 수 있습니다 다른 스타일을 재정의 할 것입니다.

   어떻게 이제 단일 요소에 대한 호버을 시뮬레이션 할 것인가?

   이 때문에 더하지, 성능이 좋은하지 않습니다. 당신이해야하는 경우에는 스타일이 요소에 대해 적용하는 경우 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");
       });
   });
   

4. ---

   4.호버를이 클래스에 : 내가 보통이 경우에 할 것은 자바 스크립트를 사용하여 클래스를 추가 ...와 같은 CSS를 부착입니다

   호버를이 클래스에 : 내가 보통이 경우에 할 것은 자바 스크립트를 사용하여 클래스를 추가 ...와 같은 CSS를 부착입니다

   사용해보십시오

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

   또는 이전 버전의 브라우저를위한 :

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

   당신은 당연히 당신이 요소를 떠날 때 "떴다"클래스를 제거하는 onmouseout 사용해야합니다 ...

5. ---

   5.스타일러 요소에 CSS 의사 클래스를 적용 할 수있는 라이브러리 : 당신은 의사를 사용할 수 있습니다.

   스타일러 요소에 CSS 의사 클래스를 적용 할 수있는 라이브러리 : 당신은 의사를 사용할 수 있습니다.

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

   면책 조항 :이 라이브러리의 공동 저자입니다. 우리는 특별히 가능성이 페이지의 CSS 규칙을 제어 할 수 부족 크롬 확장에 사용하기 위해, 그것은 또한 출처 간 스타일 시트를 지원하도록 설계되었습니다.

6. ---

   6.난 당신이 DOM 조작 후 CSS를 검사 할 있으리라 믿고있어,하지만 곧 당신이 DevTools로에 마우스 다시 이동, 이벤트는 더 이상 그 html 요소에 활성화되어 있지 않습니다. 자바 스크립트 이벤트에 대한 DevTools로의 호버 옵션 : 당신은 아마 뭔가를하고 싶습니다. 즉 존재하지 않는,하지만 당신은 그것을 시뮬레이션 할 수 있습니다.

   난 당신이 DOM 조작 후 CSS를 검사 할 있으리라 믿고있어,하지만 곧 당신이 DevTools로에 마우스 다시 이동, 이벤트는 더 이상 그 html 요소에 활성화되어 있지 않습니다. 자바 스크립트 이벤트에 대한 DevTools로의 호버 옵션 : 당신은 아마 뭔가를하고 싶습니다. 즉 존재하지 않는,하지만 당신은 그것을 시뮬레이션 할 수 있습니다.

   자바 스크립트가 비활성화되어 있기 때문에, 다시 요소 (들)을 수정할 수있는 기회를 얻을하지 않습니다. 당신은 DevTools로 이동하고, 마우스를 클릭하거나 그것으로 뭔가 다른 일을하는 것처럼 CSS와 HTML을 검사 할 수 있습니다. 작업을 완료 한 후, 다시 명령 패널로 이동하여 '자바 스크립트 사용'을 선택합니다.

from https://stackoverflow.com/questions/17226676/how-do-i-simulate-a-mouseover-in-pure-javascript-that-activates-the-css-hover by cc-by-sa and MIT license