Intro.js：突出显示的区域无法按预期工作

Question

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

但是，在我的应用程序中，高亮度区域几乎完全变白。

我猜这是一些CSS冲突，但我该怎么做才能确定导致此问题的原因？

Answer 1

摘自第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;
}

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

Answer 2

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

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

Answer 3

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

df$Station <- factor(df$Station, levels = c("Station1","Station2","Station3"))
df$From <- as.numeric(df$From)

df[order(df$From,df$Station),]

Answer 4

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

Answer 5

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

1. 看来你正在使用像ExtJs之类的其他UI库， 确保你没有任何CSS冲突。
2. 尝试改变 data-intro和data-step在另一个元素中，例如现在 您在data-intro元素中有data-step和form， 将其更改为上部元素或div。

Answer 6

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

Answer 7

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

Answer 8

我设法获得了有用的结果：

.introjs-helperLayer {
     mix-blend-mode: overlay !important;
}