オンマウス時にCSSで何らかの処理をしてみる

オンマウス時の処理をJavaScriptで依頼されることが多いのですが、それってCSSだけでできるのでは？ということが結構あるのでオンマウス時にCSSでできることを色々試してみます。

オンマウスの実装方法

CSSでオンマウス時に処理を行う場合、:hoverを使って実装します。

例1

オンマウスしたaに含まれるimgの透過を変更します。

a:hover img {
	opacity: 0.7;
}

例2

aに直接隣接する(直後)imgの透過を変更します。

a:hover + img {
	opacity: 0.7;
}

例1ではimgにオンマウスしても透過はされたままですが、例2ではimgにオンマウスするとaのオンマウスが外れてしまうため、imgの透過は元に戻ってしまいます。
基本的には例1で使った子孫セレクタで指定する形が多いと思いますが、オンマウスの対象範囲によっては例2のような隣接セレクタや間接セレクタで指定するとよいと思います。
　

画像の拡大

liにオンマウスした時に、子要素のimgを拡大してみます。

HTML

<ul class="sample01">
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/E74C3C/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/3498DB/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/2ECC71/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/9B59B6/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
</ul>

CSS

.sample01 {
	width: 100%;
}
.sample01 li {
	position: relative;
	z-index: 1;
	float: left;
	width: 200px;
	margin: 10px;
	padding: 10px;
}
.sample01 li:hover {
	z-index: 5;
}
.sample01 li:hover img {
	width: 300px;
	height: auto;
	margin-left: -50px;
}
.sample01 a {
	display: block;
	color: #000;
	text-decoration: none;
}

liにオンマウスした時に、z-indexで重なり順の調整、imgのサイズ拡大(widthでサイズの指定、margin-leftで左にずらして位置調整)を行っています。
画像の拡大のデモページ
　

プルダウン

HTML

<ul class="sample02">
	<li>
		<a href="">ナビ1</a>
	</li>
	<li>
		<a href="">ナビ2</a>
		<ul>
			<li><a href="">ナビ2-1</a></li>
			<li><a href="">ナビ2-2</a></li>
			<li><a href="">ナビ2-3</a></li>
		</ul>
	</li>
	<li>
		<span>ナビ3</span>
		<ul>
			<li><a href="">ナビ3-1</a></li>
			<li><a href="">ナビ3-2</a></li>
			<li><a href="">ナビ3-3</a></li>
			<li><a href="">ナビ3-4</a></li>
			<li><a href="">ナビ3-5</a></li>
		</ul>
	</li>
	<li>
		<a href="">ナビ4</a>
	</li>
</ul>

CSS

.sample02 {
	width: 100%;
	height: 30px;
	line-height: 30px;
	background: #34495e;
}
.sample02 a,
.sample02 span {
	color: #ffffff;
	text-decoration: none;
}
.sample02 > li {
	float: left;
	width: 100px;
	background: #34495e;
}
.sample02 > li > a,
.sample02 > li > span {
	display: block;
	height: 30px;
	border-right: #ffffff 1px solid;
	padding: 0 10px;
}
.sample02 > li > ul {
	display: none;
}
.sample02 > li:hover > ul {
	display: block;
}
.sample02 > li > ul > li {
	border-bottom: #ffffff 1px solid;
}

liにオンマウスした時に、子要素のulのdisplayを切り替えています。
プルダウンのデモページ
　

アニメーションを追加する

画像の拡大にアニメーションを追加してみます。

HTML

<ul class="sample03">
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/E74C3C/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/3498DB/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/2ECC71/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
	<li>
		<a href="">
			<div class="image">
				<img src="http://placehold.it/300x240/9B59B6/000000" width="200" height="160" />
			</div>
			<p class="text">説明テキストです。</p>
		</a>
	</li>
</ul>

CSS

.sample03 {
	width: 100%;
}
.sample03 li {
	position: relative;
	z-index: 1;
	float: left;
	width: 200px;
	margin: 10px;
	padding: 10px;
}
.sample03 li:hover {
	z-index: 5;
}
.sample03 img {
	height: auto;
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
.sample03 li:hover img {
	width: 300px;
	margin-left: -50px;
}
.sample03 a {
	display: block;
	color: #000;
	text-decoration: none;
}
.sample03 .text {
	margin: 0;
}

imgにtransitionを指定してアニメーションさせています。
アニメーション追加のデモページ
　

ロールオーバーをふわっと切り替える

オンマウス時の画像を透明度0で重ねておいて、オンマウス時にアニメーションで表示させます。

HTML

<div class="sample04">
	<a href="">
		<img src="img_off.jpg" width="400" height="200" class="off" alt="" />
		<img src="img_on.jpg" width="400" height="200" class="on" alt="" />
	</a>
</div>

CSS

.sample04 {
	position: relative;
	width: 400px;
}
.sample04 img {
	display: block;
}
.sample04 .on {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
}
.sample04 a:hover .on {
	opacity: 1;
}

ロールオーバーをふわっと切り替えるデモページ