Blog スタッフブログ

WEB制作

疑似要素で再現する要素にhoverを取り入れる際の注意点

WEB制作のG・Yです。

CSSの疑似要素で再現している背景色や画像といったオブジェクトに対して、マウスカーソルを合わせた際にhover要素の動きを取り入れたいと思うこともあるでしょう。

ただし、疑似要素に直接hover要素を指定しようとしても失敗します。

疑似要素にhoverの動きを取り入れる際、たとえば該当箇所をマウスホバーした際に表示する画像をitem.pngからitem2.pngに入れ替えるという動きを取り入れたい場合は

.item{
position: relative;
	&::before{
		
		content: "";
		cursor: pointer;

		width: 66px;
		height: 67px;
		z-index: 2;
		position: absolute;
		top: 30px;
		right: 30px;
		transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		background-image: url(images/item.png);
		background-size: 100% auto;
	
	}
	&:hover{
		opacity: 1;
		transition-duration:0.7s;
		&::before{
			background-image: url(images/item2.png);
		}
	}
 }

このように、画像を表示するためのプロパティbackground-imageの記述のみをhover要素内に記述することで再現できます。

戻る一覧へ戻る