driver.jsを使ってあるフッターをハイライトさせようとしたのですが、position:fixedを設定していると
ハイライトされた要素がdriver.jsのバックグラウンド色に隠れて
真っ白になってしまうことがあります。
通常はこのようにオブジェクト内でもある程度カスタマイズできるのですが、今回は
中のcssを触らないと直せないっぽい。
driver.defineSteps([
{
element: ‘.home-tabbar’,
popover: {
title: ‘ホームタブ’,
description: ‘受け取り期限の近い申請や新着商品が<br/>確認できます’,
}
てなわけで今回はdriver.jsの中にあるdriver.min.jsの中にあるcssをいつも読み込んでいるcssに
コピーすることでオーバーライドする際の演出をカスタマイズすることが
できるようになっているデモンストレーションです。。
以下ハイライトする時の要素の領域を変更する設定
div#driver-highlighted-element-stage, div#driver-page-overlay {
background: transparent !important;
outline: 5000px solid rgba(0, 0, 0, .75);
}
driver-highlighted-element-stageがハイライトされる対象の領域で
div#driver-page-overlayはハイライトされる要素以外の暗い部分に当たります。
transparent(透明)にしているのでオーバーライドした要素以外の要素を
真っ白に塗り潰されることなく透過した状態で見ることができます。
他のプロパティも同じように現ファイルにコピーすることでカスタマイズが
できるようになります。