ATOZ CSSクイックヒント：ホバーと高さの使用

この記事は、ATOZ CSSシリーズの一部です。このシリーズの他のエントリはこちらをご覧ください：フルシリーズを表示 ホバーエフェクトの完全なビデオとテキストレコードを表示

ATOZ CSSシリーズへようこそ！このシリーズでは、アルファベットの文字から始めて、さまざまなCSS値（およびプロパティ）を探索します。スクリーンショットでは不十分な場合があることがわかっています。この投稿では、ホバリングの効果について新しいヒントを追加しました。

hはホバーと高さを表します

ホバー効果に関しては、私はすでに文字Hに関するビデオに多くを紹介しているので、ここでは詳しく説明しません。ただし、ホバー状態にクールなアニメーションを適用できます。 Googleで「CSSホバーエフェクト」を検索すると、多くのことが見つかります。

以下は、巧妙な効果を持ついくつかのWebサイトです

codrops：CSS遷移ホバー効果
デザインシャック：貼り付けホバーエフェクトをコピー
css-tricks：ポップホーバー

また、私は最近、コードスクールのビデオを作成しました。

別のCSS Hプロパティ（このWebサイトで詳細に説明しませんでした）は高さ（高さ）です。

高さ属性は、要素のコンテンツの高さを定義するために使用されます。すべての標準長さユニット（PX、EM、REM、％、VW、VH、その他のユニットなど）を使用して高さを制御できます。

要素の高さが明示的に設定されていない場合、すべての要素が含まれているすべての要素に対応する最小高さ（デフォルト値Autoに対応）として計算されます。

要素の柔軟性を制限するため、要素の高さを明示的に設定することを避けることを一般的にお勧めします。これは、利用可能な幅が変化するため、コンテンツを垂直に再配置する必要がある場合に、レスポンシブデザインで特に重要です。

したがって、画像などの事前定義されたサイズの要素に高さのみを設定する傾向があります。別のユースケースは、絶対的または固定位置決めを使用する場合、高さ（および幅）がポジショニング要素の周りに収縮することです。

次の例は、固定された高さを設定する問題を示しています。

サンプルコードを表示

テキストの最初のセットは正しいように見えますが、テキストがスタイルよりも短くても長くなると、スタイルがもはや正しくありません。インクルージョンボックスが大きすぎるか、テキストがボックスの外にあふれています。

テキストオーバーフローを修正する1つの方法は、オーバーフロープロパティを使用することですが、これによりテキストが切り捨てられ、読み取れないようになります。

これは、最初に高さが指定されていない場合、完全に回避できます。何もせずにコードの柔軟性を向上させることができれば、ためらうことなくそうすることを選択します！

CSSホバーハイツ（FAQ）

に関する

FAQ

CSSホバー効果は何ですか？それはどのように機能しますか？

CSSホバーエフェクトは、マウスポインターが要素を覆うときにスタイルを適用する擬似クラスです。マウスがホバリングしているときにボタンの色を変更するなど、Webページにインタラクティブな効果を作成するためによく使用されます。ホバー効果は、「：Hover」セレクターを使用してCSS属性を変更することにより適用されます。たとえば、マウスがホバリングしているときにボタンの背景色を赤に変更するには、次のコードを使用できます。

<code class="language-css">button:hover {
  background-color: red;
}</code>

CSSホバー効果を使用して要素の高さを変更するにはどうすればよいですか？

ホバールールの新しい高さを指定することにより、CSSホバー効果を使用して要素の高さを変更できます。たとえば、マウスがdiv要素を越えたときにその高さを上げたい場合は、次のコードを使用できます。

この例では、マウスがDIVの上に浮かぶとき、Divの高さは200pxに変化します。

<code class="language-css">div:hover {
  height: 200px;
}</code>

メディアクエリでCSSホバーエフェクトを使用できますか？

はい、メディアクエリを備えたCSSホバーエフェクトを使用して、レスポンシブホバーエフェクトを作成できます。たとえば、メディアクエリを使用して、画面に特定の幅がある場合にのみホバーエフェクトを適用できます。例は次のとおりです。

この例では、画面幅が少なくとも600pxの場合にのみ、ホバー効果が適用されます。

CSSホバー効果を使用して複数のプロパティを一度に変更できますか？

<code class="language-css">@media (min-width: 600px) {
  div:hover {
    height: 200px;
  }
}</code>

はい、CSSホバー効果を一度に使用して複数のプロパティを変更できます。たとえば、div要素の高さ、幅、背景の色を変えることができます。例は次のとおりです。

この例では、マウスがDivの上に浮かぶとき、divの高さ、幅、および背景色が変わります。

CSSホバーエフェクトを使用して遷移効果を作成できますか？

<code class="language-css">div:hover {
  height: 200px;
  width: 200px;
  background-color: red;
}</code>

はい、CSSホバー効果を遷移プロパティと組み合わせて使用​​して、スムーズな遷移効果を作成できます。たとえば、マウスがDIV要素の上にホバリングしている間に、2秒でdiv要素の高さを徐々に変更する遷移効果を作成できます。例は次のとおりです。

この例では、マウスがDIVを上に出すと、Divの高さは2秒で徐々に200pxに変化します。

元の画像にアクセスできないため、すべての画像リンクをプレースホルダーとして置き換えたことに注意してください。 プレースホルダーを実際の画像リンクに置き換えてください。 同様に、記事でリンクが必要な場所もプレースホルダーに置き換えられます。実際の状況に従ってそれらを置き換えてください。

以上がATOZ CSSクイックヒント：ホバーと高さの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。