懸停其他div時，通過過渡更改div圖片（僅CSS）

Question

我有一個我無法解決的小問題，因為我想使用單獨的CSS。 我只想做與我的代碼相反的事情，但是我找不到實現它的方法。 那是我的代碼：

HTML：

<div class="central1">
    <div id="central_imgl">
        <img class="bottom" src="images/kostnic_central1.jpg" width="370px" height="400px"/>
        <img class="top1 hover" src="images/kostnic.jpg" width="370px" height="400px"/>
    </div>
    <div id="central_imgr">
        <img class="bottom" src="images/kostnic_central2.jpg" width="370px" height="400px"/>
        <img  class="top1 hover" src="images/kdata2.jpg"/>
    </div>
</div>

CSS：

div.central1{
    background: black;
    display: block;
    position: absolute;
    width: 740px;
    height: 400px;
    top:190px;
    left:350px;
    color: white;
}

#central_imgl {
  position:relative;
  float: left;
  width: 50%;
  height: 100%;
  margin:0 auto;
}

#central_imgl img {
  position:absolute;
  left:0;
  width: 368px;
  height: 400px;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}


#central_imgl img.top1:hover {
  opacity:0;
}

（與使用float：right的central_imgr相同）

現在，當我將鼠標懸停在central_imgl上時，我想更改顯示在'central_imgr'上的img，同時保持central_imgl的正面img，反之亦然。

謝謝大家！

Answer 1

DEMO

CSS代碼：

 *{
  box-sizing:border-box;
}

div.central1{
    background: black;
    display: block;
    position: absolute;
    width: 740px;
    height: 400px;
    top:190px;
    left:350px;
    color: white;
    border:4px solid black;
    overflow:hidden;
}

[id^=central] {
  position:relative;
  float: left;
  width: 50%;
  height: 100%;
}
[id=hiddenDiv]{
  position:absolute;
  right: 0;
  width: 50%;
  height: 100%;
  z-index:1;
}
 img {
  position:absolute;
  left:0;
  top:0;
  width: 100%;
  height: 400px;
  transition: opacity 1s ease-in-out;
}


#central_imgl .top1:hover {
  opacity:0;
}

#central_imgl:hover + [id=central_imgr] .hover{
  opacity:0;
}

[id=hiddenDiv]:hover + #central_imgl .top1{
  opacity:0;
}

html代碼：

    <div class=central1>
    <div id=hiddenDiv></div>
    <div id="central_imgl">
        <img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-frc3/l/t1.0-9/1604926_659171170797962_1284145215_n.jpg" width="370px" height="400px"/>
        <img class="top1 hover" src="https://scontent-a-fra.xx.fbcdn.net/hphotos-frc1/t1.0-9/10154320_659171017464644_1223781208_n.jpg" width="370px" height="400px"/>
    </div>
    <div id=central_imgr>
        <img class=bottom src="https://scontent-b-fra.xx.fbcdn.net/hphotos-prn2/t1.0-9/1234076_659170960797983_1698005470_n.jpg" width="370px" height="400px"/>
        <img  class="top1 hover" src="https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/t1.0-9/10156133_658968587484887_710971290_n.jpg"/>
    </div>
</div>