Reactでホバーのスタイルを設定する方法

プラトン再発行

フォロワー： 0

概要

ビジュアルを操作することは、インターフェイスをインタラクティブに保ち、ユーザーの注意を引くための優れた方法です。画面上でオブジェクトをアニメーション化すると、ユニークなエクスペリエンスが作成され、インタラクティブ性が向上します。

この記事では、CSSを使用してReactでホバーをスタイリングする方法と、インラインホバースタイリングを行う方法を学習します。

ホバーは、マウスが特定の要素のオンとオフになっているときにユーザーに認識させるために、特定のスタイルを追加できるようにする疑似クラスです。この記事では、ボックスを使用します。

const App = () => {
   return (
      <div>
         <div className="box">
            <p>Hover me!</p>
         </div>
      </div>
   );
};

この基本的なスタイルがあります：

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

基本的に、背景色を次のように変更します lightblue マウスがボックスの上にあるとき、そしてマウスが取り外されたときにそれをデフォルトのスタイルに戻します。

Reactでホバーのスタイルを設定する方法

これには、外部とインラインのXNUMXつのアプローチがあります。外部では、ホバーのスタイルを簡単に設定できる個別のCSSファイルが必要ですが、インラインスタイルでは疑似クラスでスタイルを設定できませんが、この記事では、マウスイベントを使用してインラインCSSでホバーのスタイルを設定する方法を学習します。

CSS外部スタイリングと反応してホバーをスタイリングする方法

これは、HTMLとCSSの動作と非常によく似ています。私たちがしなければならないのは、要素に className （会員登録はお済みでしょうか？ class）または、ターゲットとするセレクターとしてタグを使用し、ホバー疑似クラスのスタイルを設定します。

.box {
   height: 200px;
   width: 200px;
   background-color: rgb(0, 191, 255);
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 30px;
   cursor: pointer;
}

.box:hover {
   background-color: lightblue;
}

私たちがしたのは、 :hover 以前のスタイルのセレクターに疑似クラスを設定し、マウスが要素の上にあるときに変更したいプロパティを変更します。

インラインスタイリングと反応してホバーをスタイリングする方法

インラインスタイリングとは、要素のタグを介したスタイリングを意味します。これは、 style 属性。上記のコードをインラインスタイルに変換する場合：

const App = () => {
   return (
      <div>
         <div
            style={{
               height: '200px',
               width: '200px',
               backgroundColor: 'rgb(0, 191, 255)',
               display: 'flex',
               justifyContent: 'center',
               alignItems: 'center',
               fontSize: '30px',
               cursor: 'pointer',
            }}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

このようなスタイルをアプリ内で繰り返すと読みづらくなる可能性があるため、ページ上のXNUMXつのオブジェクトのみをスタイリングする場合は、スタイルオブジェクトを作成でき、そのためのファイルを作成する必要はありません。

const App = () => {

const boxStyle = {
   height: '200px',
   width: '200px',
   backgroundColor: 'rgb(0, 191, 255)',
   display: 'flex',
   justifyContent: 'center',
   alignItems: 'center',
   fontSize: '30px',
   cursor: 'pointer',
};

   return (
      <div>
         <div style={boxStyle}>
            <p>Hover me!</p>
         </div>
      </div>
   );
};

これまでのところ、ボックスを作成しました。 ReactでインラインCSSを使用してホバーのスタイルを設定するには、状態と、状態を使用してインラインスタイルを条件付きで設定します。 onMouseEnter & onMouseLeave 小道具。マウスが要素上にあるときとそうでないときを教えてくれます。

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };
   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      <!-- ... -->
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

この時点で、を使用して任意のプロパティを条件付きでスタイル設定できます *isHover* 状態：

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
};

これまで、それを実装する方法を見てきました。それでは、コードを分解して、使用した構文を使用した理由を説明しましょう。ホバリングがいつ発生するかを示すブール値を格納する状態を作成することから始めました（true）およびそれ以外の場合（デフォルトでは、 false):

const [isHover, setIsHover] = useState(false);

次に、divにXNUMXつのイベントを追加して、状態を変更し、マウスがボックス上にあるときとボックス外にあるときを認識できるようにしました。

<div
   style={boxStyle}
   onMouseEnter={handleMouseEnter}
   onMouseLeave={handleMouseLeave}
>
   <p>Hover me!</p>
</div>

　 onMouseEnter マウスが要素に入るとイベントがトリガーされますが、 onMouseLeave イベントは、終了時にトリガーされます。これらの各イベントに関数を割り当てました。これを使用して、状態を変更します。

const handleMouseEnter = () => {
   setIsHover(true);
};

const handleMouseLeave = () => {
   setIsHover(false);
};

ベストプラクティス、業界で認められた標準、および含まれているチートシートを含む、Gitを学習するための実践的で実用的なガイドを確認してください。グーグルGitコマンドを停止し、実際に学ぶそれ！

私たちは state トリガーされたイベントに基づいて各関数で。最後に、状態を使用して、ボックスだけでなく条件付きでスタイルを設定できます。 backgroundColor、他のスタイルの場合：

const boxStyle = {
   
   backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
   color: isHover ? 'red' : 'green',
};

これらすべてをまとめると、ReactwithInlineスタイルでホバーのスタイルを設定できるようになります。

import { useState } from 'react';

const App = () => {
   const [isHover, setIsHover] = useState(false);

   const handleMouseEnter = () => {
      setIsHover(true);
   };

   const handleMouseLeave = () => {
      setIsHover(false);
   };

   const boxStyle = {
      height: '200px',
      width: '200px',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      fontSize: '30px',
      cursor: 'pointer',
      backgroundColor: isHover ? 'lightblue' : 'rgb(0, 191, 255)',
      color: isHover ? 'red' : 'green',
   };

   return (
      <div>
         <div
            style={boxStyle}
            onMouseEnter={handleMouseEnter}
            onMouseLeave={handleMouseLeave}
         >
            <p>Hover me!</p>
         </div>
      </div>
   );
};

export default App;