<li>内の画像をhoverで切り替え

前提・実現したいこと

の各imgをホバーして各々で別の画像に切り替えたいです。

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

hover後の画像サイズの指定方法がわからず原寸大になります。
各々ではなくli全体に効いてしまう。
→li要素のどこにカーソルを当てても一番上の"a画像"が原寸大で表示されます。
参考したコード

こうなってしまいます。

該当のソースコード

 <div class="example">
  <p>title</p>
  <div class="img-box">
　 <ul>
    <li><img src="A画像"><img src="a画像"class="active">aaa</li>
    <li><img src="B画像"><img src="b画像"class="active">bbb</li>
    <li><img src="C画像"><img src="c画像"class="active">ccc</li>
    <li><img src="D画像"><img src="d画像"class="active">ddd</li>
    <li><img src="E画像"><img src="e画像"class="active">eee</li>
   </ul>
  </div>
 </div>

.example{
 text-align: center;
 padding: 10px 0px;
 border-bottom: solid  1px #fff;
}

.example ul{
 display: flex;
 list-style: none;
 justify-content: space-around;
}

.example li{
 width: 20%;
 text-align: center;
 color: #142e52;
}

.example img{
 width: 100%;
}

.example p{
 color: #142e52;
 margin: 0;
 font-size: 15px;
}

.img-box {
  position: relative;
}
.img-box .active {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: 0.5s; 
}
.img-box:hover .active {
  opacity: 1;
}

試したこと

<div class="img-box">の削除 .img-box→.exampleにまとめる

.activeにwidth100%サイズ指定
→liの幅100%にしたかったため、しかし100%のためか原寸大に

このへんかな…と思うところを色々触ってみたのですがやりたいことが上手く記述できずダメでした。
liなのが原因でしょうか。

このような感じにしたいです。

よろしくおねがいいたします。

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

回答2件

下記の2点を修正してください。

css
1.img-box li{ /* 修正 */
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 .active:hover { /* 修正 */
12  opacity: 1;
13}

投稿2020/12/16 06:12

hatena19

総合スコア33797

ojreee

2020/12/16 06:33

大変ありがとうございました。無事動作致しました。助かりましたm()m

Lhankor_Mhy

2020/12/16 06:35

こっちの方がスマートですね……

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

ベストアンサー

こんにちは。

サンプル

css
1.img-box .active {
2  position: absolute;
3  left: 0;
4  top: 0;
5  opacity: 0;
6  transition: 0.5s; 
7  pointer-events: none; /* 追加 */
8}
9.img-box img:hover + .active { /* 変更 */
10  opacity: 1;
11}
12li{ /* 追加 */
13  position: relative;
14}