CSSに基づいてマウス入力の方向を決定する

以前、フロントエンド技術グループに所属していたとき、グループのメンバーが面接中に問題に遭遇したと言っていました。面接官は、マウスの位置に基づいてオブジェクトの移動方向を決定するデモを純粋な CSS を使用して実装するように依頼しました。

与えられた初期構造は次のとおりです。

<スタイル>
体 {
    パディング: 2em;
    テキスト配置: 中央;
}
。ブロック {
    位置: 相対的;
    表示: インラインブロック;
    幅: 10em;
    高さ: 10em;
    垂直位置合わせ: 中央;
}

.block_content {
    位置: 絶対;
    上: 0;
    左: 0;
    幅: 100%;
    高さ: 100%;
    テキスト配置: 中央;
    行の高さ: 10em;
    背景: #333;
    色: #FFF;
}
</スタイル>
<p class="text">次のコンテンツ上でマウス ポインターをさまざまな方向から移動します</p>
<p>↓</p>
<span>→ </span>
<div class="block">
    <div class="block_content">
        ホバリングして！
    </div>
</div>
<span>←</span>
<p>↑</p>

効果図は以下のとおりです。

成し遂げる

業務とは全く関係のない、実用的でない質問ばかりでイライラします。中国のフロントエンドはいつになったら立ち上がるのでしょうか？良い質問をありがとうございます。実装できるよう最善を尽くします。

では、この機能は本当に純粋な CSS で実現できるのでしょうか?

答えは「はい」です。まず、そのアイデアを分解してみましょう。

CSS マウスイベント

まず、質問によると、この質問ではマウス操作を使用する必要があることがわかります。JS にはさまざまなmouseイベントがありますが、同様に、CSS にも:hoverあります。

この質問で使用するセレクターは、hoverです:hover

方向を決める

方向を判断する機能がこの質問の核心です。

タイトル画像から判断すると、実際には方向指示が与えられており、マウスを 4 つの矢印の方向に入力する必要があることがわかります。

次に、純粋な CSS で実装する場合、マウスがキーノードに触れる必要があり、このノードの特定のパフォーマンスによってこの位置を表現できる必要があります。

これらは質問に示されている 2 つの隠れた条件です。

それでは実装してみましょう。

まず、 :hoverを通じてこのキーノードをタッチする必要があります。タッチは矢印の方向にトリガーされる必要があります。次に、矢印の方向にタッチできるオブジェクトを追加できます。例:

<スタイル>
.block_hoverer {
    位置: 絶対;
    幅: 100%;
    高さ: 100%;
    zインデックス: 1;
}
.block_hoverer:n番目の子(1) {
    背景: 赤;
}

.block_hoverer:n番目の子(2) {
    背景：ライム;
}

.block_hoverer:n番目の子(3) {
    背景: オレンジ;
}

.block_hoverer:n番目の子(4) {
    背景: 青;
}
</スタイル>
<div class="block">
    <div class="block_hoverer">トップ</div>
    <div class="block_hoverer">次へ</div>
    <div class="block_hoverer">左</div>
    <div class="block_hoverer">右</div>
    <div class="block_content">
        ホバリングして！
    </div>
</div>

効果は以下のとおりです。

右のブロックを除いて、他のすべてが覆われていることがわかります。これは正常です。

次に、これらのブロックを端に戻す必要があります。

コードは次のとおりです。

.block_hoverer {
  位置: 絶対;
  zインデックス: 1;
  幅: 100%;
  高さ: 100%;
  遷移: すべて 0.3 秒の緩和;
}
.block_hoverer:n番目の子(1) {
  背景: 赤;
  上限: -90%;
}

.block_hoverer:n番目の子(2) {
  背景：ライム;
  上位: 90%
}

.block_hoverer:n番目の子(3) {
  背景: オレンジ;
  左: -90%;
}

.block_hoverer:n番目の子(4) {
  背景: 青;
  左: 90%;
}

効果は以下のとおりです。

次に、トランジションを追加します。

.block_hoverer {
  遷移: すべて 0.3 秒の緩和;
}
.block_hoverer:ホバー{
  不透明度: 1;
  上: 0;
  左: 0;
}

効果は以下のとおりです。

1 つのステップは非表示にすることです:

。ブロック {
  位置: 相対的;
  表示: インラインブロック;
  オーバーフロー: 非表示;
  幅: 10em;
  高さ: 10em;
  垂直位置合わせ: 中央;
}
.block_hoverer {
  不透明度: 0;
}
.block_hoverer:ホバー{
  不透明度: 1;
}

効果は以下のとおりです。

完全なコードは次のようになります。

<スタイル>
    体 {
        パディング: 2em;
        テキスト配置: 中央;
    }
    。ブロック {
        位置: 相対的;
        表示: インラインブロック;
        オーバーフロー:非表示;
        幅: 10em;
        高さ: 10em;
        垂直位置合わせ: 中央;
        変換: translateZ(0);
    }
    .block_hoverer {
        位置: 絶対;
        zインデックス: 1;
        幅: 100%;
        高さ: 100%;
        不透明度: 0;
        遷移: すべて .3 秒の緩和;
    }

    .block_hoverer:n番目の子(1) {
        背景: 赤;
        上限: -90%;
    }

    .block_hoverer:n番目の子(2) {
        背景：ライム;
        上位: 90%
    }

    .block_hoverer:n番目の子(3) {
        背景: オレンジ;
        左: -90%;
    }

    .block_hoverer:n番目の子(4) {
        背景: 青;
        左: 90%;
    }
    .block_hoverer:ホバー{
        不透明度: 1;
        上: 0;
        左: 0;
    }

    .block_content {
        位置: 絶対;
        上: 0;
        左: 0;
        幅: 100%;
        高さ: 100%;
        テキスト配置: 中央;
        行の高さ: 10em;
        背景: #333;
        色: #FFF;
    }
</スタイル>
<本文>
    <p class="text">次のコンテンツ上でマウス ポインターをさまざまな方向から移動します</p>
    <p>↓</p>
    <span>→ </span>
    <div class="block">
        <div class="block_hoverer">1</div>
        <div class="block_hoverer">2</div>
        <div class="block_hoverer">3</div>
        <div class="block_hoverer">4</div>
        <div class="block_content">
            ホバリングして！
        </div>
    </div>
    <span>←</span>
    <p>↑</p>
</本文>

完全な効果については、Yutouのコードペンをご覧ください。

CSS によるマウス入力方向の決定に関する記事はこれで終わりです。CSS マウス入力方向に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: CSSスタイルで実現されるHTML背景色のグラデーション効果

>>: よくある CSS エラーと解決策