fotorama スライダーの矢印をカスタマイズしたい

Question

前提・実現したいこと

・参考サイト様
https://kirin-archi.com/case/483.html

上記サイト様のようにスライダーマウスオーバー時に出てくる
矢印を変更したいのですが、
id="fotorama"のdivタグに対してデベロッパーツールでhoverを付与しても矢印が出てこないため
実装方法がわかりません。
変更方法がわかるかたいましたら教えていただけませんでしょうか。

試したこと

こちらで同じ質問をしていた方がいましたが
同じくバージョンの違いか実装できませんでした。
https://stackoverflow.com/questions/20199087/fotorama-change-cursor-to-custom-image-of-arrow-previous-and-next

Answer 1

ダウンロードしてみたところ、fotorama.pngというファイルがあり、矢印はこれを参照しているようでしたので、これを差し替えるのはどうでしょうか。

または、.fotorama__arr--nextなどにCSSでスタイリングしてもいいかもしれません。

Comments

[comN]

わざわざダウンロードして検証していただきありがとうございます。
fotorama.pngには他にもボタンデータも含まれていたので
CSSスタイリングの方を使わせて頂きました。

.fotorama__arrに幅と高さを指定して
.fotorama__arr--prevと.fotorama__arr--nextにそれぞれbackground-imageを追加
上記で再現できました！