javascript - 突出显示允许交互的元素

我正在尝试创建自己的产品巡回处理（尝试使用类似intro.js的方法之后）。

Here是我刚刚创建的JSFiddle。

我所拥有的是CSS的div：

.highlight {
  position: fixed;
  top: 14px;
  left: 16px;
  width: 54px;
  height: 40px;
  z-index: 1000;
  pointer-events: none;
}

.highlight__overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  border-radius: 5px;
  transition: all .5s ease;
  border: 2000px solid rgba(0 ,0 ,0 ,0.85);
  margin: -1000px;
  box-sizing: content-box;
  transform: translate3d(-1000px, -1000px, 0);
  pointer-events: none;
}

如您所见，该按钮突出显示并且可以单击，但是也可以单击其他两个按钮。

如何仅使突出显示区域中的元素可单击？

另外-我应该注意任何产品浏览/教程JS库吗？这些，基本上将具有我需要的功能。

最佳答案

我已经更新了您的jsfiddle Here

我在您的CSS的pointer-events: none部分中添加了button，并为按钮One提供了一个enabledButton类。

然后我在您的CSS的pointer-events: auto部分中添加了.enabledButton

只需一行jquery，您就可以从所有按钮中删除enabledButton类：
$("button").removeClass("enabledButton");

然后，仅将enabledButton类添加到突出显示的按钮。

现在，具有enabledButton类的按钮将是可单击的，而其他所有按钮则不是。这样，您可以显式启用希望用户单击的按钮，而默认情况下禁用所有其他按钮。