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

Question

我正在尝试创建我自己的产品巡回处理(在尝试了一些像 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 库？那些，基本上将具有我需要的功能。

Answer 1

我已经更新了你的 jsfiddle Here

我将 pointer-events: none 添加到您的 css 的 button 部分，并为按钮 One 添加了一类 enabledButton。

然后我将 pointer-events: auto 添加到您的 css 的 .enabledButton 部分

使用一行 jquery，您可以从所有按钮中删除 enabledButton 类: $("button").removeClass("enabledButton");

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

现在，类为 enabledButton 的按钮将可点击，而其他按钮则不可点击。通过这种方式，您可以明确启用您希望用户单击的按钮，而所有其他按钮默认情况下处于禁用状态。