0

我试图将两个 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;
}
4

2 回答 2

3

开始了，

现场示例

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>

你知道的一些事情：

  1. 为了使每个 div 在彼此前面，我使用绝对位置。
  2. 我改变了你为使 div 淡出而做的整个事情，我认为这种方式更清洁
  3. 我将您的 HTML 更改为使用绝对位置。
  4. 您的 img 将是 100% 的宽度，而 max-width354px可以是任何值，只要是您的 img 将使用的最大宽度即可。因此，当小于 354px 时，他将使用 100% 的整个 div。

编辑：

如果您不关心浏览器支持，您可以使用 CSS3 过渡，请注意没有 IE<10。
这是过渡的答案

于 2013-05-28T12:42:16.407 回答
1

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/

于 2013-05-28T12:47:07.187 回答