CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSホバー：ハウツーガイド

CSS：hoverセレクターは、カーソルで要素にカーソルを合わせると要素を選択します。たとえば、：hoverを使用して、リンクにカーソルを合わせたときにリンクの色を変更できます。

ユーザーがその要素にカーソルを合わせたときに、Webページ上の要素に適用されるスタイルを移行することをお勧めします。

そこでCSSの：hoverセレクターが登場します。：hoverセレクターを使用すると、要素の上にマウスを置いたときに要素を選択できます。これにより、ユーザーが要素にカーソルを合わせたときにスタイルを適用できます。

このチュートリアルでは、CSSのセレクターの基本と、CSS：hoverセレクターの使用方法を例を挙げて説明します。このチュートリアルを終えると、：hoverを使用してスタイルを適用する要素を選択するエキスパートになります。

CSSセレクター

CSSでは、セレクターを使用して、Webページにスタイルを適用するHTML要素を選択します。セレクターを使用すると、ID、クラス、グループ、または属性に応じて要素を選択できるため、特定のスタイルを特定の要素に適用できます。

たとえば、HTMLドキュメント内のすべての

タグをホットピンクの背景で表示したいとします。次のコードを使用してこれを行うことができます：

h1 {
	background-color: hotpink;
}

このコードでは、Webページ上のすべての

タグを選択するために使用される

セレクターを使用します。次に、中かっこで囲んで、Webページの

タグに適用するスタイルを指定します。

CSS：ホバーセレクター

CSS：hoverセレクターは、マウスで要素にカーソルを合わせると要素を選択します。 ：hoverは任意のCSS要素で使用できますが、一般的にリンクで使用されます。 ：hoverは、リンクのa：hoverなど、選択する要素の名前の後に指定されます。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

：hoverセレクターを使用するシナリオは多岐にわたります。セレクターの潜在的な使用例は次のとおりです。

  • ユーザーがテキスト行にマウスを合わせたときにテキストの色を変更する。
  • ユーザーが画像の上にマウスを置いたときに画像のサイズを変更します。
  • ユーザーがボタンの上にマウスを置いたときにボタンの色を変更します。

これらすべてのユースケースでは、ユーザーがカーソルで要素にカーソルを合わせると、特定のスタイルが適用されます。

：hoverセレクターの構文は次のとおりです。

selector:hover {
	// CSS rules
}

：hover構文の主なコンポーネントは次のとおりです：

  • セレクター ：hoverセレクターが適用される要素の範囲です。したがって、ユーザーが

    要素にカーソルを合わせるたびに：hover効果をトリガーする場合は、 h3を指定します。 。

  • ：ホバー CSSルールのスタイルは、ユーザーが特定の要素にカーソルを合わせたときにのみ適用するようにブラウザに指示します。この要素はセレクターによるものです プロパティ。
  • CSSルール ユーザーがセレクターで定義された要素にカーソルを合わせたときに適用する必要があるスタイルです。 。たとえば、テキストのフォントサイズや
    タグの背景色を指定できます。または、フィールドの境界半径を指定することもできます。

いくつかの例を見て、Web開発者がCSS：hoverセレクターをどのように使用できるかを示しましょう。

：CSSの例をホバー

：hoverセレクターを使用する方法はいくつかあります。以下では、：hoverセレクターが役立つ可能性のあるいくつかの一般的なシナリオについて説明します。

CSSホバー効果：リンクの色を変更する

：hoverセレクターを使用すると、ユーザーがリンクにカーソルを合わせたときにリンクの色を変更できます。

CareerKarmaホームページというテキストを含むリンクをデザインしているとします。 そして、ユーザーをCareerKarmaサイトに送ります。このリンクは、薄緑の色で表示されるように設定されています 私たちのウェブページで。

リンクをオレンジに変更する必要があります ユーザーがカーソルでリンクにカーソルを合わせたとき。この効果を作成するには、次のコードを使用できます。

<html>

<a href="https://careerkarma.com">Career Karma homepage</a>
<html>
  
<style>

a {
	color: lightgreen;
}

a:hover {
	color: orange;
}
<style>

CSSホバー：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

コードを分解してみましょう。

HTMLファイルでは、タグを使用してCareerKarmaホームページへのリンクを定義します。次に、CSSコードで、2つのルールを定義します。

最初のルールは、Webページ上のすべてのHTMLタグに適用されます。このルールでは、すべてのタグのテキストの色を lightgreenに設定します 色を使用する プロパティ。

2番目のルールは、ユーザーがタグにカーソルを合わせると、Webページ上のタグの色をオレンジ色に変更します。これは、：hoverセレクターを使用して実現されます。

したがって、ユーザーがテキストにカーソルを合わせると、CareerKarmaホームページ 、リンクの色がオレンジ色に変わります。

CSSホバー効果：テキストのブロックを表示

：hoverセレクターを使用して、ユーザーがテキスト行にカーソルを合わせたときにテキストのブロックを表示することもできます。

CareerKarmaWebサイトのよくある質問ページを設計しているとします。ユーザーが質問にカーソルを合わせると、質問への回答を含むテキストのブロックが表示されます。このコードを使用してサンプルの質問を作成できます：

<html>

<span>What is Career Karma?</span>
<div>Career Karma is a community of peers, mentors, and coaches that will help you land a dream career in tech.</div>
<html>
  
<style>

div {
	display: none;
	background-color: orange;
	padding: 10px;
}

span:hover + div {
	display: block;
}
<style>

CSSホバー：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

タグを使用して、「キャリアカルマとは何ですか？」という質問を作成しました。 これは私たちのウェブページに表示されます。次に、質問への回答を含む

タグを使用しました。

CSSファイルでは、

タグに次のスタイルを使用しました：

  • display：none、これにより
    タグが非表示になります。
  • background-color：orange。
    タグの背景色をオレンジに設定します。
  • CSSパディング：10px。これにより、
    タグのコンテンツとその境界線の間に10pxのギャップが作成されます。

次に、span：hover+divセレクターを使用してルールを定義しました。このルールは、表示のスタイルを変更します

タグでブロックするルール 、それが表示されます。したがって、ユーザーがタグ（span：hoverで示される）にカーソルを合わせると、
タグが表示されます。

画像の変更：ホバー時のCSS

：hoverセレクターを使用できる別のシナリオは、Webページ上の画像を変更することです。ユーザーがコンピューターのカーソルで画像にカーソルを合わせると、画像が変化します。

地元のコーヒーショップのウェブサイトをデザインしているとします。ユーザーがAboutでコーヒーのストック画像にカーソルを合わせたとき ページでは、新しい画像が既存の画像を置き換える必要があります。新しい画像はカフェのストック画像である必要があります。

次のコードを使用して、画像のホバー効果を実現できます。

<html>

<img height="750" width="1250" class="aboutImage" />
<html>
  
<style>

.aboutImage {
	background: url("https://images.unsplash.com/photo-1497515114629-f71d768fd07c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1062&q=80");
}

.aboutImage:hover {
	background: url("https://images.unsplash.com/photo-1525610553991-2bede1a236e2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80");
}
<style>

CSSホバー：ハウツーガイド 上記のコードエディタのボタンをクリックして、HTML/CSSコードの出力を確認します。>

高さ750ピクセル、幅1250ピクセルの画像を作成するタグを定義しました。タグに割り当てられたクラスはaboutImageと呼ばれます 。

CSSファイルで、2つのルールを宣言しました。

最初のルールは、クラス名.aboutImage。の要素に表示される背景画像を設定します。 背景画像としてコーヒーのストックフォトを使用しています。

2番目のルール.aboutImage：hoverは、ユーザーがホバーしている.aboutImageクラスで要素の背景画像を変更します。表示される新しい画像は、カフェのストック画像です。

：HoverSelectorのその他の使用法

前に説明したように、：hoverセレクターが役立つシナリオはいくつかあります。動作中の：hoverセレクターの例をさらに探している場合は、これらの他のキャリアカルマチュートリアルを表示することをお勧めします：

  • CSSトランジション：ユーザーがWebページ上の要素にカーソルを合わせたときに表示されるトランジションを作成する方法に関するガイド。
  • CSSナビゲーションバー：CSSを使用してナビゲーションバーを作成する方法に関するガイド。
  • CSSドロップダウンメニュー：CSSを使用してドロップダウンメニューを作成する方法に関するガイド。

ホバーセレクターは、ボタンのホバー効果を作成するためにも使用されます。これらの効果はボタンの外観を変更し、ホバーアニメーションをトリガーします。

他のセレクターについてさらに学ぶために読むことができるCSSセレクターに関するガイドもあります。

結論

CSS：hoverセレクターを使用すると、ユーザーがカーソルで要素にカーソルを合わせたときに要素を選択できます。要素を選択すると、新しいスタイルのセットを適用できます。これらは、ユーザーがカーソルで要素にカーソルを合わせるのをやめるまで表示されます。

このチュートリアルでは、CSSセレクターの基本と、：hoverセレクターの使用方法を例を挙げて説明しました。これで、CSSエキスパートのように：hoverセレクターを使い始める準備ができました！

CSSの主要な学習リソース、コース、書籍に関するアドバイスについては、CSSの学習方法ガイドをご覧ください。


  1. CSS子セレクター

    指定した要素の直接の子であるすべての要素を選択する場合は、子セレクターを使用します。 div > p 例 次のコードを実行して、CSS子セレクターを実装してみてください <!DOCTYPE html> <html>    <head>       <style>          div > p {             background-color: orange;

  2. CSS子孫セレクター

    CSSの子孫セレクターは、指定された要素の子孫であるすべての要素を照合するために使用されます。 例 次のコードを実行して、CSSDescendentSelectorを実装してみてください。 <!DOCTYPE html> <html>    <head>       <style>          div p {             background-color: orange