にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

リンクではない要素の上でマウスポインタを手(指)型にするCSS [基本]

一般的なブラウザでは、リンクの上にマウスポインタを載せるとマウスポインタの形が手(指)型に変化して「クリック可能」なことを示します。しかし、リンクにはなっていない(=a要素ではない)場所でも、クリック可能なことを示すためにマウスポインタの形を手(指)型にしたいことがあります。
例えば、クリック時の動作をJavaScriptで記述していて、リンクにはしない(=a要素以外の要素を使ってマークアップしている)場合などです。

このように、リンクではない場所でマウスポインタの形を手(指)型に変化させる方法もスタイルシートには用意されています。方法はとても簡単で、cursorプロパティを使えば良いだけです。

リンクではない場所でマウスポインタの形を手(指)型に変化させる表示例

以下の枠内には3つの画像があります。どれも単にp要素の中にimg要素を入れているだけで、リンクにはなっていません。それぞれマウスポインタを載せると以下のような動作になるはずです。

  • 1つ目の画像:マウスポインタを載せても何も起きない。(通常の表示)
  • 2つ目の画像:マウスポインタを載せると、ポインタがリンクのように手(指)の形になる。
  • 3つ目の画像:マウスポインタを載せると、ポインタがリンクのように手(指)の形になった上で、背景色も変わる。

以下、実際にマウスポインタを載せて試してみて下さい。

写真
▲普通の状態

写真
▲手の形状にする

写真
▲手の形状にした上で背景色も変える

上記のように、リンクではない場所でもリンクのようにマウスポインタの形状を変化させる方法は、スタイルシートを使えばとても簡単です。

リンクではない場所でマウスポインタの形を手(指)型に変化させるCSSソース

先程のような例を実現するには、下記のように記述します。
まず、HTMLソースは以下のようになっているとします。

	<p class="mousepointer-hand">
		<img src="summerriver.jpg" alt="写真">
	</p>

単にp要素の中にimg要素で画像を1つ入れているだけです。スタイルシートで装飾を加えるために、p要素には「mousepointer-hand」というclass名を付加しています。
その上で、CSSソースを以下のように記述します。

.mousepointer-hand {
	cursor: pointer;
}

たったこれだけです。とても簡単です。
cursorプロパティは、マウスポインタの形状を指定するプロパティです。標準値は「auto」なので状況に応じて自動的に変化します。この値を「pointer」にすれば、マウスポインタの形状は(リンクの上に載せた際のような)手の形になります。

なお、値に「default」を指定すると、何もない場所での標準のポインタになります。
値に「text」を指定すると、(リンクではない)文字列の上に載せた際のポインタになります。
これらを使えば、逆に「リンクなのに(a要素なのに)リンクではないように見せる」ことも可能です。

マウスポインタの形を手(指)型に変化させた上で背景色も変化させるCSSソース

さて、先の表示例の3つ目のように、(リンクではないのに)画像の上にマウスポインタを載せただけで背景色も変化させるには、以下のようにCSSソースを記述します。

.mousepointer-hand:hover {
	cursor: pointer;
	background-color: #ccffcc;
}

ここでは、hover疑似クラスを使っています。
リンクの上にマウスポインタが載った際に装飾を変化させる際は、a:hover { ~ }のように「a要素のhover疑似クラス」を使いますが、hover疑似クラスは何もリンク(a要素)に対してしか使えないわけではありません。よほど古いブラウザを除けば、他の要素にも指定可能です。

なので、「リンクではない要素」であっても、「マウスが載った際に装飾を変化させたい」なら、hover疑似クラスを使えば良いのです。

以上、リンクではない要素の上でマウスポインタを手(指)型にするCSSの書き方を紹介しました。

《2016/04/09 10:23 初版公開》

スタイルシートTipsふぁくとりーの主要なカテゴリ

現在、以下のカテゴリに区分してスタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連書籍など

--- 当サイト内を検索 ---