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。一个主要的包装，两个图像包装/面具就是你所需要的。请将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;
}

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

1 个答案: