(Javascript/jQuery) 画像を切り替えるホバーアクションが実現できません。

質問内容

複数並ぶ画像を作成ギャラリーを作成しています。

実装としては、画像ホバーをすると他の画像を切り替えるアクションをjQueryで実現したいです。
そのために、以下の CSS HTML Javascript を準備しました。
画像は position:absolute で重ねて、表示・非表示を設定しています。

2枚の画像があるのですが
上の画像 ⇨ ホバーしたら出現 opacity:1 になる
下の画像 ⇨ 上の画像をホバーしたら opacity:0 になる

しかし、以下のコードでは、ホバー時に並んでいる画像の全ての画像までもが opacity;0 になってしまいます。
理想のアクションは、ホバーをした画像のみが opacity:0 になることです。

よろしくお願いします。

ソースコード

HTML
1<div>
2  <div>
3    <div class="image-box"> <a><span class="tt-img">        
4        <img src="#">
5      </span><span class="imgArea">
6        <img src="#">
7      </span>
8      <span>
9      Sale
10      <span>
11      </span></span></span>
12    </a></div>
13    <div>
14      <div>
15        <ul>
16          <li>‥</li>
17        </ul>
18      </div>
19      <h2> text </h2>
20      <div><span>text</span><span>
21	<ul><li>text</li></ul>
22  	
23</div>
24<div><div>
25      </div>
26    </div></div>
27  <div>
28  </div></div>
29</div>

css
1.img-remove {
2opacity:0 !important;
3}
4
5.opacity {}
6
7.img-roll-over {
8    position: absolute;
9    top: 0;
10    left: 0;
11    opacity: 0;
12    z-index: 1;
13    width: 100%;
14    -webkit-transition: opacity 0.3s ease-out;
15    transition: opacity 0.3s ease-out;
16}
17
18.img {
19    -webkit-transition: opacity 0.3s ease-out;
20    transition: opacity 0.3s ease-out;
21    overflow: hidden;
22    top: 0;
23    left: 0;
24}

jQuery
1$(document).ready(function() {
2$( ".imgArea",).hover(
3function() {
4$(this).addClass('opacity');
5$('.img').addClass('img-remove');
6}, function() {
7$(this).removeClass('opacity');
8$('.img').removeClass('img-remove');
9}
10);
11});
12

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

回答1件

ベストアンサー

HTMLの開始タグと終了タグの対応がおかしかったり、CSSの.opacityの中身がなかったりで、正常に動作しないものを見せられても回答しようがないです。

とりあえずホバーで画像を入れ変えるなら、jQuery使わなくもCSSだけで可能です。

HTMLも無意味に複雑なのでシンプルに書き換えてサンプルを作成しましたのでご参考に。

html
1    <div class="image-box">
2      <a>
3        <div class="imageArea">
4          <img src="https://picsum.photos/seed/1/400/300">
5          <img class="img-roll-over" src="https://picsum.photos/seed/2/400/300">
6        </div>
7        <div>
8          Sale
9        </div>
10      </a>
11    </div>

css
1.imageArea {
2  position: relative; 
3  overflow: hidden;
4}
5img {
6  transition: opacity 0.3s ease-out;
7}
8.img-roll-over {
9  position: absolute;
10  top: 0;
11  left: 0;
12  opacity: 0;
13}
14.imageArea:hover img {
15  opacity: 0;
16}
17.imageArea:hover .img-roll-over {
18  opacity: 1;
19}