13

我正在使用非常有趣的 javascript 库intro.js。

然而，在我的应用程序中，高亮区域几乎变成了全白。

我猜这是一些 CSS 冲突，但我能做些什么来确定这个问题的原因？在此处输入图像描述

4

8 回答 8

12

摘自问题 #109 ( https://github.com/usablica/intro.js/issues/109 )：

.introjs-helperLayer {
    background: transparent;
}

.introjs-overlay {
    opacity: 0 !important;
}

.introjs-helperLayer:before {
    opacity: 0;
    content: '';
    position: fixed;
    width: inherit;
    height: inherit;
    border-radius: 0.5em;
    box-shadow: 0 0 0 1000em rgba(0,0,0, .7);
    opacity: 1;
}

.introjs-helperLayer:after {
    content: '';
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 1000;
}

这将解决您的问题。希望它对我有帮助！向在 GitHub 中提供答案的 @weili1977 和 @exoJSON 大喊。

于 2019-01-17T17:57:36.183 回答
5

该问题可以通过设置父元素的绝对位置来解决：

.introjs-fixParent {
  position: absolute !important;
}
于 2018-10-17T13:56:52.543 回答
2

这对于使用表格行元素的用户来说很常见。我通过将这些行添加到 css 来解决我的问题。

.introjs-relativePosition > td { position: relative; }
.introjs-showElement > td { z-index: 9999999 !important; }
于 2014-10-28T05:06:40.680 回答
2

我设法得到了一个可用的结果：

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}
于 2019-09-03T03:22:34.353 回答
1

我将目标元素位置设置为绝对（在相应的 CSS 中），它现在可以工作了！见这里 - http://prntscr.com/1dl0db

于 2013-07-04T21:43:13.237 回答
0

我没有看到任何 jsFiddle 或您的问题的任何在线示例，但我尝试以这种方式回答您的问题：

  1. 似乎您正在使用另一个 UI 库，例如 ExtJs 或其他东西，请确保您没有任何 CSS 冲突。
  2. 尝试在另一个元素中更改 data-introand data-step，例如，如果现在元素中有data-introand data-step，请将form其更改为上部元素或 a div。
于 2013-04-13T03:39:14.040 回答
0

在 Introjs.css 中，将 introjs-helperlayer 类的 z-index 设置为 1 可解决此问题。但是，我不知道这种变化的全部含义。

于 2013-05-07T13:50:14.240 回答
0

您是否要突出显示表格行（）？如果是这样，我也遇到了这个问题。有人在 github 问题部分发布了修复：https ://github.com/usablica/intro.js/issues/146

于 2013-08-19T13:11:43.400 回答