概要
ホバー時に画像切り替える方法を紹介。検証ブラウザ
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
- Microsoft Edge(最新)
- IE11
- IE10
実装方法
HTML
<div class="rollover-img">
<img src="https://konocode.jp/img/common/webclip1.png" alt="">
<img src="https://konocode.jp/img/common/logo_dawn.svg" alt="">
</div>
SCSS
.rollover-img {
img {
&:last-of-type {
display: none;
}
}
&:hover img {
&:first-of-type {
display: none;
}
&:last-of-type {
display: inline;
}
}
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
