/*- マウス選択スタイル記事概要を上に浮かび上がらせる -*/
.xlog-post:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* マウスホバー時にボックスに影を表示 */
transform: translate(0, -10px);/* マウスホバー時にボックスを10px上に移動 */
}
上記のコードを使用すると、ボックスの端にマウスを移動すると、ボックスが高速でジャンプします。
アーカイブページでは問題ありませんが、アーカイブページではボックス間の間隔が小さく、マウスをスライドさせると直接次のボックスに移動します。
そのため、ブロガーは最初に問題に気付かなかったのですが、
問題を解決するために、この浮上プロセスに時間を追加します。
同様の問題が発生しないように、すべてのページに適応するために、
両方のコードに追加する必要があります。以下は修正後のコードです。
/*- マウス選択スタイル記事概要を上に浮かび上がらせる -*/
.xlog-post {
transition: all 0.3s;/* 浮上するための時間 */
}
.xlog-post:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* マウスホバー時にボックスに影を表示 */
transform: translate(0, -10px);/* マウスホバー時にボックスを10px上に移動 */
}
.xlog-post {
padding: 1rem;
}
/*- マウス選択スタイルアーカイブ記事リストを上に浮かび上がらせる -*/
.items-center.-mx-2 {
transition: all 0.3s;/* 浮上するための時間 */
}
.items-center.-mx-2:hover {
box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* マウスホバー時にボックスに影を表示 */
transform: translate(0, -5px);/* マウスホバー時にボックスを5px上に移動 */
}