DEMO

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的右侧的center_imgr也一样），

现在我想在我移动central_imgl时更改'central_imgr'上显示的img，保持front_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>

在悬停其他div时仅更改div图像（仅限CSS）

1 个答案:

DEMO