Question

我正在尝试创建自己的产品巡回处理（尝试过类似intro.js之类的操作之后）。

Here是我刚刚创建的JSFiddle。

我拥有的是div与CSS：

.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

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

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

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

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

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

Answer 2

您可以使用CSS做类似的事情

. disabled{
       pointer-events : none;
    }

并将此类添加到其他非突出显示的按钮中。

另一种需要一些Javascript的解决方案是向按钮添加默认的HTML disabled属性，并仅使用类似的innerHTML对于突出显示的按钮将其删除。

突出显示允许交互的元素

2 个答案: