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

前提・実現したいこと

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">
      
       <!-- メインのカード３つの箱 -->
       <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;
}

/* ｐｃスタイル */
/* ヘッダー */
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;
 }
/*  メインのカード３つの箱*/
.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のところです。
ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

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

総合スコア116724

bbtdp027

2020/11/29 21:15

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

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