Intro.js : 강조 표시된 영역이 예상대로 작동하지 않습니다.

Question

매우 흥미로운 자바 스크립트 라이브러리 intro.js을 사용하고 있습니다.

그러나 내 응용 프로그램에서는 하이라이트 부분이 거의 완전히 희게됩니다.

나는 이것이 약간의 CSS 충돌이라고 생각하지만,이 문제의 원인을 알아 내기 위해 무엇을 할 수 있습니까?

Answer 1

나는 어떤 jsFiddle 또는 문제의 모든 온라인 예를 보지 않았다 그러나 나는 이런 방식으로 귀하의 질문에 대답하려고 :

1. 그것은 당신의 ExtJS이나 뭐 같은 다른 UI 라이브러리를 사용하고있는 것 같다 것, CSS 충돌이 없는지 확인하십시오.
2. 지금 당신이 form 요소에 data-intro 및 data-step, 상위 요소 또는 div에 변경이있는 경우, 예를 들어, 다른 요소에 data-intro 및 data-step을 변경하려고합니다.

Answer 2

Introjs.css에서 introjs-helperlayer 클래스의 z- 색인을 1로 설정하면이 문제가 해결됩니다. 그러나, 나는이 변화의 모든 함축을 모른다.

Answer 3

대상 요소 위치를 절대 (해당 CSS에서)로 설정하면 이제 작동합니다! 여기를 참조하십시오 - http://prntscr.com/1dl0db

Answer 4

테이블 행()을 강조 표시하려고합니까? 그렇다면 나는이 문제도 경험했다. 누군가 github 발행 섹션에 수정 사항을 게시했습니다. https://github.com/usablica/intro.js/issues/146

Answer 5

이는 테이블 행 요소를 사용하는 사용자에게 일반적입니다. 나는이 줄을 CSS에 추가하여 내 문제를 해결한다.

.introjs-relativePosition > td { position: relative; } 
.introjs-showElement > td { z-index: 9999999 !important; }