クリックするとdiv飛びが画面から消えますか？

Question

だから私はこの丸いdivを持っています。

<div id = "dot"></div> 

このスタイリングでは、マウスを置くと画面から飛び出します。

#dot { 
    height: 75px; 
    width: 75px; 
    background-color: red; 
    border-radius: 50%; 
    margin: 0 auto; 
    position: relative; 
    top: 30vh; 
    transition: all 2s; 
} 

#dot:hover { 
    top: -1000vh; 
} 

#dot { 
    -webkit-transition-timing-function: ease-in-out; 
    transition-timing-function: ease-in-out; 
} 

私はドットがクリックされたときに、フライオフ - 画面遷移が発生したい、と私は、純粋なCSSやJavaScriptのバニラで解決策を探しています。それが重要であれば、ドットは最終的にリンク要素にラップされ、その劇的な終了は新しいページの読み込みを予告します。

ボーナスに関する質問：このラウンドdivに最終的にSVGが含まれていると、パフォーマンス/外観に悪影響を及ぼしますか？

Answer 1

divにtabindexを追加し、CSSを:hoverから:focusに変更することで、これを達成できます。

（アウトラインを削除することを忘れないでください）。

#dot { 
 
    height: 75px; 
 
    width: 75px; 
 
    background-color: red; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    top: 30vh; 
 
    transition: all 2s; 
 
} 
 

 
#dot:focus { 
 
    top: -1000vh; 
 
    outline: none; 
 
} 
 

 
#dot { 
 
    -webkit-transition-timing-function: ease-in-out; 
 
    transition-timing-function: ease-in-out; 
 
}

<div tabindex='1' id = "dot"></div>