driver.js 动画效果显示 highlight 区域

Question

driver.js 动画效果开启下，highlight 会遮蔽图标的问题

问题截图：
driver = new Driver({
// （原作者关闭动画反倒加了不少的样式）
animate: true,
// 禁止点击蒙版关闭
allowClose: false,
closeBtnText: i18n.t(‘msg.guide.close’),
nextBtnText: i18n.t(‘msg.guide.next’),
prevBtnText: i18n.t(‘msg.guide.prev’)
})

解决：
添加样式
#driver-highlighted-element-stage {
background: transparent!important;
outline: 5000px solid rgba(0,0,0,.75);
}

#driver-page-overlay {
background: none !important;
}

就这样。。。

Answer 1

Sunday 2023-01-12 11:52:09

你好

把背景颜色变为透明，这是一个很好的方案。该问答已经在小节内置顶

• OrcXiao #1

  driver.js组件高亮时遮蔽图标的问题是因为 .fixed-header 类使用了 position：fixed
  自从Chrome 22 之后，position为fixed的元素会创建一个新的层叠上下文（stacking context），
  而子元素的 z-index 值，只在父级层叠上下文中才中有意义。其他浏览器并没有这个问题
  driver.js组件实现高亮的原理是利用z-index 给目标dom添加z-index: 100004 
  弹窗层的z-index: 100003。从而高亮目标dom。
  目标dom的父元素设置position为fixed之后 z-index便遵从从父原则 导致高亮失败。
  所以我的解决方案是 修改 layout/index 文件如下
  .fixed-header {
      ...
      position: absolute;
      width: 100%;
  }