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

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

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

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

CSS

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

Q&A

解決済

1回答

751閲覧

cssでhoverしたら画像を切り替えたいです

bbtdp027

総合スコア10

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/11/20 07:01

前提・実現したいこと

hoverすると画像を切り替えたい
ここに質問の内容を詳しく書いてください。
画像をposition:abusoluteで設置しています。ホバー したら別の画像に切り替えたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。

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

画像が切り替わらない

エラーメッセージ

該当のソースコード

<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LIG</title> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="content"> <!-- メインとサイドバーのコンテナ --> <div class="flex-container"> <!-- メインのカード3つの箱 --> <main class="main-container"> <div class="card"><a href=""> <div class="card-img"> <img src="img/image.png" alt=""> <img src="img/new.png" alt="" class="new"> </div><!--card-img--> <div class="card-description"> <div class="date-label"> <span class="date">2016.01.01 FRI</span> <span class="label">WEB</span> </div><!--date-label--> <p class="card-text">フォントを擬人化して、そのデザインがもつ雰囲気を再発見してみ た(欧文編)</p> </div><!--card-description--> </a></div><!--card--> <div class="card"><a href=""> <div class="card-img"> <img src="img/image-bottle.jpg" alt=""> <img src="img/new.png" alt="" class="new"> </div><!--card-img--> <div class="card-description"> <div class="date-label"> <span class="date">2016.01.01 FRI</span> <span class="label">LIFE</span> </div> <p class="card-text">プレゼントにも最適!デザインが秀逸な焼酎ボトルコレクション</p> </div><!--card-description--> </a></div><!--card--> <div class="card"><a href=""> <div class="card-img"><img src="img/image-manga.png" alt=""></div><!--card-img--> <div class="card-description"> <div class="date-label"> <span class="date">2016.01.01 FRI</span> <span class="label">漫画</span> </div> <p class="card-text">『このマンガがすごい! 2016』に入っててほしい漫画超個人的5選</p> </div><!--card-description--> </a></div><!--card--> </main> <!-- サイドバー --> <aside class="sidebar"> <div class="sidebar-img"><img src="img/banner.jpg" alt=""></div> <div class="category"> <h2 class="cate-ttl">カテゴリ一覧</h2> <ul class="cate-list"> <li class="cate-list-item"><a href="#">すべて</a></li> <li class="cate-list-item"><a href="#">殿堂入り</a></li> <li class="cate-list-item"><a href="#">おもしろ</a></li> <li class="cate-list-item"><a href="#">web制作</a></li> <li class="cate-list-item"><a href="#">ライフスタイル</a></li> <li class="cate-list-item"><a href="#">ニュース</a></li> </ul> </div> </aside> <div class="pagetop-img"> <a href="#"><img src="img/pagetop.png" alt="" class="pagetop"></a> <a href="#"><img src="img/pagetop-hover.png" alt="" class="pagetop-hover"></a> </div><!--pagetop-img>--> </div><!--flex-container--> <!-- フッター --> <footer> <div class="footer-inner"> <div class="office"> <h2 class="footer-ttl"><a href="index.html"><img src="img/logo.png" alt=""></a></h2> <div class="office-info"> <p class="tel">株式会社LIG TEL : 03-6240-1253</p> <p> 〒110-0015 東京都台東区東上野2-18-7 共同ビル 10F</p> </div><!--office-info--> </div><!--office---> <ul class="fnav-list"> <li class="fnav-list-item"><a href="#">プライバシーポリシー</a></li> <li class="fnav-list-item"><a href="#">メディア・広告掲載について</a></li> <li class="fnav-list-item"><a href="#">サイトマップ</a></li> </ul> <p class="copyright">© 2006-2015 LIG INC.</p> </div><!--footer-inner--> </footer> </div><!--content--> </div><!--wrapper--> </body> コード
box-sizing:border-box } html{ font-size: 62.5%; } body{ font-family: "YuGo" "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; } a{ display: block; text-decoration: none; color: #1e0606; } li{ list-style: none; font-size: 1.5rem; font-weight: bold; color: #1e0606; } img{ width: 100%; height: auto; } p{ color: #1e0606; font-weight: bold; } .wrapper{ max-width: 1200px; margin: auto; } /* pcスタイル */ /* ヘッダー */ header{ background: #fff; } .btnarea{ display: flex; justify-content: flex-end; padding: 0 20px; } .btnarea>*+*{ margin-left: 24px; } .facebook-img a{ width: 20px; height: 20px; background: url(img/icon-facebook.svg) no-repeat; } .facebook-img a:hover{ background: url(img/icon-facebook-hover.svg) no-repeat; } .twitter-img a{ width: 22px; height: 20px; background: url(img/icon-twitter.svg) no-repeat; } .twitter-img a:hover{ background: url(img/icon-twitter-hover.svg) no-repeat; } .mail-img a{ width: 22px; height: 20px; background: url(img/icon-inquiry.svg) no-repeat; } .mail-img a:hover{ background: url(img/icon-inquiry-hover.svg) no-repeat; } /* メインとサイドバーのコンテナ */ .flex-container{ position: relative; display: flex; justify-content: space-between; padding: 0px 8%; padding-top: 52px; padding-bottom: 100px; margin: auto; background: #f3f3f3; } .pagetop-img{ width: 8%; position: absolute; bottom: -50px; left: 45%; } .pagetop-hover { display: none; } .pagetop { display: block; } .pagetop-img a:hover>.pagetop-hover a{ display: block; } .pagetop-img a:hover>.pagetop a{ display: none; } /* メインのカード3つの箱*/ .main-container{ width: 64% } .main-container>*+*{ margin-top: 27px; } .card a{ display: flex; background: #fff; } .card a:hover{ opacity: 0.6; } .card-img{ max-width: 280px; position: relative; } .new{ position: absolute; top: -5px; left: -5px; width: 30%; } .card-description{ width: calc(100% - 280px); padding: 4.6% } .date-label{ display: flex; flex-wrap: wrap; justify-content: space-between; } .date{ padding-left: 20px; background: url(img/icon-time.png) no-repeat left; text-align: center; font-size: 1.4rem; line-height: 2; } .label{ padding: 0 8px; background: #bfa34c; font-size: 1.4rem; line-height: 2; color: #fff; } .card-text{ font-size: 2rem; line-height: 1.4; margin-top: 22px; } /* サイドバー */ .sidebar{ width: 30%; } .category{ margin-top: 24px; } .cate-ttl{ font-size: 1.6rem; line-height: 2.38; text-align: center; color: #ffffff; background-color: #bfa34c; } .cate-list-item{ font-size: 1.6rem; line-height: 3.8; text-align: left; color: #000000; background: url(img/next.png) no-repeat right; background-size: 32px 32px; background-color: #fff; border: solid 1px #f3f3f3; } .cate-list-item a{ padding-left: 26px; } .cate-list-item a:hover{ background: #f3f3f3; } /* フッター */ .footer-inner{ padding-top: 48px; padding-bottom: 40px; border-bottom: solid 2px #f3f3f3; } .office{ display: flex; justify-content: center; padding-bottom: 37px; border-bottom: solid 2px #f3f3f3; } .footer-ttl{ width: 130px; } .office-info{ margin-left: 53px; font-size: 1.2rem; line-height: 1.7; } .fnav-list{ display: flex; justify-content: center; padding-top: 30px; } .fnav-list-item{ font-size: 1.3rem; border-left: 1px solid #f3f3f3; transform: skewX(150deg); } .fnav-list-item:first-child{ border-left: none; } .fnav-list-item a{ transform: skewX(-150deg); padding: 0 24px; } .fnav-list-item a:hover{ opacity: 0.6; } .copyright{ margin-top: 25px; font-size: 1.3rem; text-align: center; } ### 試したこと 過去の質問を参考に試してみたのですがうまく行きませんでした。displayで切り替えるやり方です。 ### 補足情報(FW/ツールのバージョンなど) 初心者なもので他も関わりがあるのか、わからないのでコードを余分にのせてます。該当はメインとサイドバーのコンテナpagetop-imgのところです。 ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答1

0

ベストアンサー

javascript

1<style> 2#imgs img{position:absolute} 3#imgs img:first-child{z-index:2;} 4#imgs:hover img:first-child{z-index:0;} 5</style> 6<div id="imgs"> 7<img src="https://placehold.jp/ff0000/00ffff/150x150.png?text=1"> 8<img src="https://placehold.jp/00ff00/ff00ff/150x150.png?text=2"> 9</div>

投稿2020/11/20 07:08

yambejp

総合スコア114572

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

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

bbtdp027

2020/11/29 21:15

すみません、早々に回答いただいていたのにお返事を忘れていました!申し訳ないです。実は上記で試してみたのですが、上手く行かず、、。おそらく私が自分のコードに上手く置き換えられていないのだと思います。今回は画像を替えなくても、ホバー 前と後で上下に動かすだけで同じ動きになったので、そちらで解決しました。ソースは知識として大変ためになりました!ご回答ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問