Blog スタッフブログ

WEB制作

【CSS】マウスホバー時に表示する画像を入れ替える方法

WEB制作のG・Yです。前回に引き続きCSSに関する記事となります。

ウェブページの制作時にリンク用のボタンを作る際、マウスホバーで背景色や文字色を変えるというのはよくあるデザインかと思われます。
そしてこういったリンクボタンには矢印や三角形のアイコンを添えることでリンクボタンだということを分かりやすく示すというデザインも多用されています。
この際、アイコンをfontawesomeで文字として配置していればリンクボタンのhtmlに内包している文字に適用したCSSがそのままアイコンにも適用されますので、
マウスホバーに併せて文字色ごと変えるといったデザインも特に問題なく再現できます。
しかし以下のようにアイコンとして画像を使用している場合はひと工夫が必要です。

	<div class="button_block">
				<a class="" href="<?php echo home_url(); ?>/">
詳しく見る<img class="arrow1" src="<?php echo esc_html(get_template_directory_uri()); ?>/images/arrow.png" alt="<?php esc_html(bloginfo('name')); ?> ロゴ"><img class="arrow2" src="<?php echo esc_html(get_template_directory_uri()); ?>/images/arrow_h.png" alt="<?php esc_html(bloginfo('name')); ?> ロゴ">   
	</a>			
			</div>

この場合マウスホバーでの背景色の変化に合わせて矢印の色も青色にしたほうが自然ですので、
そういった動きを再現できるようCSSを以下のように記述します。


.button_block a {
    color: #fff;
    width: 100%;
    display: block;
    max-width: 328px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    text-align: center;
    line-height: 1;
    padding: 25px 0;
    margin-top: 60px;
    background-color: #e5006e;
    z-index: 0;
}

.button_block a .arrow1 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
    z-index: 2;
}

.button_block a .arrow2 {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 10px;
    z-index: 1;
}

.button_block a:hover {
color: #fff;
    background-color: #212b68;
}

.button_block a:hover img {
    opacity: 1;
}

.button_block a:hover .arrow1 {
    display: none;
}

aタグ、通常時の画像、ホバー時に表示する画像のそれぞれにz-indexを指定し、
画像にはそれぞれ別個のクラス（今回はarrow1、arrow2）というクラスを振って区別します。
画像はどちらも全く同じ位置に、そしてarrow2（ホバー時用の画像)がarrow1(通常時の画像)の直下になるよう配置します。

マウスホバーした際にarrow1にのみdisplay: none;を指定してarrow1を非表示にすることで直下に配置したarrow2が視認できるようになり、
動きとしてはあたかもマウスホバーによって両者の画像が切り替わっているように見えます。

SCSSでの記述は以下のようになります。


.button_block{
	a{
		    color: #fff;
    width: 100%;
    display: block;
    max-width: 328px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    text-align: center;
    line-height: 1;
    padding: 25px 0;
    margin-top: 60px;
   background-color: #e5006e;
   z-index: 0;
   i{
   		position: absolute;
			top: 0;
			bottom: 0;
			margin:auto;
			right: 10px;
			height: 15px;
   }
.arrow1{
			position: absolute;
			top: 0;
			bottom: 0;
			margin:auto;
			right: 10px;
			z-index: 2;
}
.arrow2{
			position: absolute;
			top: 0;
			bottom: 0;
			margin:auto;
			right: 10px;
			z-index: 1;
}
&:hover{
	color: #fff;
background-color:#212b68;
img{
	opacity: 1;
}
.arrow1{
	display: none;
}
}
	}
}
戻る一覧へ戻る