質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

4回答

9323閲覧

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

bd_

総合スコア21

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

2クリップ

投稿2018/05/23 04:00

前提・実現したいこと

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に当てると消すことはできた。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/05/23 04:25

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

2018/05/23 04:28

また、htmlもご提示ください。
guest

回答4

0

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

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で使えば 画像がにょきっと現れるとかに使えます。
guest

0

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

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

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ざっくりな仕組みでよければ
「最初から配置しておいて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}

未検証です

投稿2018/05/23 05:01

sousuke

総合スコア3828

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

汎用性(更新性)が高いのはjQueryを使用する事だと思います。

理由としては、背景・absoluteにする場合はCSSでサイズ表記が必要
(画像差し替えでサイズが変われば都度更新)
CSSやHTMLに画像パスの記載が必要
(画像変更の場合は都度パスを更新)

jQueryだと画像のファイル名末尾に「_on」「_off」などを付けるだけで実装可能です。

参考サイトもたくさんあります。
http://neet-navi.info/wordpress/431/
https://idotdesign.net/blog/web/js/hover-change-image/

投稿2018/05/29 02:20

編集2018/05/29 02:22
yyyy.yyyy

総合スコア53

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問