當鼠標懸停在另一個div上時，轉換div圖像（ONLY 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; 
} 

（以及相同的漂洗液central_imgr：右）

現在我要上改變顯示IMG 'central_imgr'當我懸停central_imgl時，保留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>