画像をクリックするときの枠を消したい。

Question

https://www.hiroyukitakase.work

こちらのサイトの右上のウサギのsvg画像(nav-rabbit)をクリックすると、jqueryでactiveクラスを付与、再度クリックでactiveクラスを消去するようにしています。

レスポンシブサイズにすると、クリックするたびに、四角い枠がでます。PCのデベロッパーツールでレスポンシブサイズにすると、青の四角い枠で、スマホ、タブレットの実機で確認すると、黒の四角い枠が出ます。

.nav-rabbit{
 outline: none !important;
}

.nav-rabbit.active{
 outline: none !important;
}

.nav-rabbit:active{
 outline: none !important;
}

これらを試していますが、解決できません。

解決方法がわかる方、試した方が良いことなど、詳しい方ご教授お願いします。

Answer 1

↑これのことでしょうか?
Chromeで試しました。

.nav-rabbitのcursor:pointerを削除すると
出なくなりましたよ。

すみません、その理由は分かりません。
マテリアルデザインの関係かなぁ。

ちなみに、FirefoxのDevToolsでは、そもそも
四角が出る現象が、再現しませんでした。

Comments

[neginattofan]

そちらのことです。
こちらでもcursor:pointerを削除すると、出なくなりました。
PCの画面だけはホバー状態を分かりやすくするようにcursor:pointerにして、レスポンシブサイズではcursor:none;にしようかと思います。
ありがとうございました！