Question

我正在尝试将两个DIV放在彼此之上，这样当指针悬停在图片上方时，顶部的一个淡出以显示下面的一个。我这样做了：http://quaystreet.chrisloughnane.net/

我想让它具有响应性，因此图片会缩放到移动设备的水平宽度。对于一张照片来说没有问题，但是当我尝试重新定位DIV时，它会断开。

http://jsfiddle.net/chrisloughnane/f2NdQ/4/

只有CSS可以做我想做的事吗？

<div id='old'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg"/></div>
<div id='new'><img src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg"/></div>

img {
    max-width: 100%;
    display: block;
    margin: auto;
}

Answer 1

我们走了，

<强> Live Example

CSS：

.images {
    width: 100%;
    position: relative;
    max-width: 354px;
    margin: 0 auto;
}

.images img {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 354px;
}

JavaScript的：

 $(document).ready(function() {    
      $('.images').on('mouseenter', function(){
          $('.images .old').fadeOut(1000);
      }).on('mouseleave', function(){
          $('.images .old').fadeIn(1000);
      });
 });

HTML：

<div class="images">
    <img class="new" src="http://quaystreet.chrisloughnane.net/images/quay-street-new.jpg">
    <img class="old" src="http://quaystreet.chrisloughnane.net/images/quay-street-old.jpg">    
</div>

有些事情你知道：

为了使每个div在彼此前面，我使用绝对位置。
我改变了你所做的全部事情，使得div fadeOut，我觉得那样更清洁
我将您的HTML更改为使用绝对位置。
您的img宽度为100％，最大宽度354px可以是任何值，只需要img将使用的最大宽度。因此，当小于354px时，他将使用100％的整个div。

修改

如果你不关心browser support你可以使用CSS3过渡，请注意没有IE＆lt; 10。 Here is the answer with transition

Answer 2

JavaScript并不是必需的。使用平滑的CSS3过渡可以实现相同的行为

.images {
    position: relative;
    margin: 0 auto;
}
.images img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-width: 354px;
    -webkit-transition: opacity .8s linear 0s;
    transition: opacity .8s linear 0s;
}
.images img:first-child {
    z-index: 2;
}
.images img:first-child:hover {
    opacity: 0;
}

示例小提琴：http://jsfiddle.net/uNkY5/1/

如何定位两个相互重叠的中心DIV并做出响应？

2 个答案: