css - 悬停时，隐藏一个 div，显示另一个

Question

我看到这个问题被问了很多次，但我的有点复杂。我在我的网站上使用 Bootstrap ，基本上，我试图加入两个图像，一半是客户图像，另一半是商业图像。实际上我想要的是，当有人将鼠标悬停在前半部分(即客户形象)上时，下半部分(即企业形象)应该转向客户形象的后半部分，反之亦然，当有人将鼠标悬停在企业形象上时。

这是我的 HTML 代码。

<div class="pics">
  <div class="1half">
    <div class="col-sm-2" style="padding-right: 0;" id="b1">
     <img src="image/b1.png" alt="" width="340px" style="float: right;">
    </div>  
   <div class="col-sm-2" style="padding-right: 0; display: none;" id="c1">
     <img src="image/c1.png" alt="" width="340px" style="float: right;">
   </div>
  </div>

   <div class="2half">

    <div class="col-sm-2" class="flash" style="padding-left: 0;" id="c2">
     <img src="image/c2.png" alt="" width="338px">
    </div>

    <div class="col-sm-2" class="flash" style="padding-left: 0; display: none;" id="b2">
     <img src="image/b2.png" alt="" width="338px">
    </div>
 </div>  

在上面的代码中，我想要的是当有人将鼠标悬停在#b1 上时:#c2 应该消失，#b2 应该可见。我尝试实现 CSS 更改，但它不起作用。

我在这里添加了 JSfiddle 上的链接。 http://jsfiddle.net/2R5bq/

基本上悬停时，两者应该相同。

Answer 1

不需要那么多的div。您只需要一个主包装器、两个图像包装器/ mask 。看这个JSFiddle一个扔在一起。

HTML

<div id="imageWrapper">

    <div id="imageLeftImageWrapper">

        <image src="http://lorempixel.com/320/180/animals/" />

    </div>

    <div id="imageRightImageWrapper">

        <image src="http://lorempixel.com/320/180/cats/" />

    </div>

</div>

CSS

#imageWrapper {
    position: relative;
    width: 320px;
    height: 180px;
}

#imageWrapper #imageLeftImageWrapper {
    position: absolute;
    top: 0px;
    left: 5px;
    width: 160px;
    height: 180px;
    overflow: hidden;
}

#imageWrapper #imageRightImageWrapper {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 160px;
    height: 180px;
    overflow: hidden;
}

#imageWrapper #imageRightImageWrapper img {
    position: absolute;
    right: 0px;
}

#imageWrapper #imageLeftImageWrapper:hover,
#imageWrapper #imageRightImageWrapper:hover {
    width: 320px;
    z-index: 1;
}