CSSのhoverを用いて画像Aから画像Bに変更したい

前提・実現したいこと

CSSのhoverを用いてマウスカーソルが画像A上に来たとき画像Bに切り替えたいのですがどうしたらよろしいでしょうか?

発生している問題・エラーメッセージ

画像Aを消すことはできましたがそこから画像Bを追加もしくは画像Aから画像Bに変更することができません。

該当のソースコード

CSS
1.○○{
2position:relative;
3}
4.○○:hover:after{
5	/*
6	filter: alpha(opacity=0);
7	-moz-opacity:0;
8	opacity:0;
9	*/
10}

試したこと

マウスカーソルを画像Aに当てると消すことはできた。

m.ts10806

2018/05/23 04:25

「変更」というのはhoverしたら変更したっきりということでしょうか。それともhover したときだけ画像Ｂにしたいということでしょうか。

m.ts10806

2018/05/23 04:28

また、ｈｔｍｌもご提示ください。

行動規範の内容に同意します

回答4件

色々なやりかたがあると思いますが、私ならこうします。

html
1<div class="img-box">
2  <img src="https://placehold.jp/150x150.png" alt="">
3  <img src="https://placehold.jp/ff0000/ffffff/150x150.png" alt="" class="active">
4</div>

css
1.img-box {
2  position: relative;
3}
4.img-box .active {
5  position: absolute;
6  left: 0;
7  top: 0;
8  opacity: 0;
9  transition: 0.5s; // ゆっくり
10}
11.img-box:hover .active {
12  opacity: 1;
13}

画像1の上に画像2を重ねます。
画像2は透明にします。
.img-boxが:hoverされたら画像2を可視化する。

opacityで画像2を透明化しているだけなので　フェードエフェクトをかけることも出来ます。

投稿2018/05/23 12:25

tsuka_rinorino

総合スコア229

yasuzombie

2018/09/13 02:24

jqueryを使わない、CSSだけのhoverのエフェクトを探してここに辿り着きました。記述が短く、応用が利くのでこちらを使わせてもらいました助かりました。 opacityで使うと透明ですが、positionのtopやleftで使えば画像がにょきっと現れるとかに使えます。

行動規範の内容に同意します

簡単にやるなら背景画像にすること、ですけど

html
1<div class="img"></div>

css
1.img{
2    width:500px;
3    height:500px;
4    background:url('画像A');
5}
6.img:hover{
7    background:url('画像B');
8}

けど、画像の比率やサイズが違うのであればwidthが画像Aに合わせて設定しているので汎用性は低いです。
background-size: cover;で多少調整できなくもないですが、
CSSよりJavaScriptでhover検知して画像切り替えた方がいいかもしれません。

投稿2018/05/23 04:33

編集2018/05/23 04:50

m.ts10806

総合スコア80875

ざっくりな仕組みでよければ
「最初から配置しておいてhoverでdisplayだけ切り替える」で
なんとかなるんじゃないでしょうか？

html
1<div class="hov">
2    <div class="a"><img src="画像A" alt=""></div>
3    <div class="b"><img src="画像B" alt=""></div>
4</div>

css
1.a {
2    display:none;
3}
4
5.b {
6    display:block;
7}
8
9.hov:hover > .a {
10    display:block;
11}
12.hov:hover > .b {
13    display:none;
14}