css hover+ が反映されません

Question

前提・実現したいこと

画面いっぱいに、二つの画像が上下に並んでいます。

それぞれの画像hover時に、
hoberした画像は100vh、されなかった画像は表示されない（display:none）ものを作成しようとしています。

結果
”画像１”側にhover時は、”画像１”100vhとなるとともに”画像２”は消えました。
しかし、
”画像２”側にhover時は、”画像２”100vhとなりましたが”画像１”は消えません。

どこか文法が間違っている、そもそも○○がおかしいなどご助言いただけると幸いです。

HTMLコード
  <div class="image1">
  </div>
  
  <div class="image2">
  </div>

該当のソースコード

.image1,
.image2{
  height: 50vh;
  width: 100vw;
  }
.image1{
  background-image: url("/image/man1280.jpg");
  background-size: cover;
}
.image2{
  background-image: url("/image/1280.jpg");
  background-size: cover;

}
.image1:hover{
  height: 100vh;
  transition: .5s;
}
.image2:hover{
    height: 100vh;
    transition: .5s;
  }
  .image2:hover + .image1{
    display: none;
  }
  .image1:hover + .image2{
  display: none;
}

試したこと

それぞれのhoverを片方づつ消してみたり、backgroudimageではなくimgタグで試した

補足情報（FW/ツールのバージョンなど）

vscode1.60.2使用

Answer 1

前方に処理ができないので適当にラップしてみてください

<style>
.image1,
.image2{
 height: 50vh;
  width: 100vw;
}
.image1{
  background-color:red;
}
.image2{
  background-color:blue;
}
.wrap:hover .image1:hover{
  transition:height .5s;
}
.wrap:hover .image1:not(:hover){
  height:0px;
  transition:height .5s;
}
.wrap:hover .image2:not(:hover){
display:none;
}
.image1:hover,
.image2:hover{
 height: 100vh;
}
</style>
<div class="wrap">
<div class="image1">1</div>
<div class="image2">2</div>
</div>

Comments

[seiya6633]

回答ありがとうございます。
代替案までいただき非常に勉強になりました。ありがとうございました！

Answer 2

参考
https://developer.mozilla.org/ja/docs/Web/CSS/Adjacent_sibling_combinator

隣接兄弟結合子adjacent sibling combinator (+) は2つのセレクターを接続し、同じ親要素の子同士であって、1つ目の要素の直後にある2つ目の要素を選択します。

そのため
.image2:hover + .image1は
image2の後にあるimage1にしか適用されません。
直前にある要素にスタイルを適用したい場合はJavascirptを使ったほうがいいでしょう。

Comments

[seiya6633]

早速のご返答ありがとうございます。
直前の要素には適用できないことがわかりました。ありがとうございます。