Question

我有两个.container类的div，它们没有正确堆叠。相反，它们重叠。

这是我的代码：

HTML

<div id="crossfadingImages" class="container">
    <img src="./media/..." class="bottom img-responsive" alt="..."/> 
    <img src="./media/..." class="top img-responsive" alt="..."/>
</div>

<div id="about" class="container">
    <div class="row">
        <div class="col-sm-6">
            <p>about...</p>
        </div>
        <div class="col-sm-6">

        </div>
    </div>
</div>

CSS

#crossfadingImages{
    position: relative;
    width: 100%;
    padding: 0;
    margin-top: 55px;
}
#crossfadingImages img{
    position: absolute;
    left: 0;
    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     transition: opacity 3s ease-in-out;
}
#crossfadingImages img.top:hover{
    opacity: 0;
}

我认为问题是crossfadingImages div中图像的绝对位置。请提供解决我的问题的方法以及解释。

Answer 1

然后你可以hover()函数

$(document).ready(function() {
  $('#crossfadingImages img').hover(function() {
      $('#crossfadingImages img:first-child').stop().fadeOut(500);
      $('#crossfadingImages img:last-child').stop().fadeIn(500);
    },
    function() {
      $('#crossfadingImages img:first-child').stop().fadeIn(500);
      $('#crossfadingImages img:last-child').stop().fadeOut(500);
    });
});

#crossfadingImages {
  width: 100%;
  padding: 0;
  margin-top: 55px;
  top: 0;
  display: block;
}
#crossfadingImages img {
  position: absolute;
  width: 45%;
  left: 0;
}
#crossfadingImages img:last-child {
  display: none;
}
#about{
  position:relative;
  top:80px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="crossfadingImages" class="container">
  <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive" alt="..." />
  <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive" alt="..." />
</div>

<div id="about" class="container">
  <div class="row">
    <div class="col-sm-6">
      <p>about...</p>
    </div>
    <div class="col-sm-6">
    </div>
  </div>
</div>

Answer 2

好的，我设法通过仅使用CSS解决了这个问题。

注意：仅当您有两个相同尺寸的图像（JPG或JPEG格式）时，此功能才有效。如果它们的大小不同，那么底部图像将一直显示，因为我们只是改变顶部图像的不透明度。

#crossfadingImages{
	position: relative;
	width: 100%;
	padding: 0;
	margin-top: 55px;
}
#crossfadingImages img{
	left: 0;
        width: 45%;
	-webkit-transition: opacity 3s ease-in-out;
	-moz-transition: opacity 3s ease-in-out;
	-o-transition: opacity 3s ease-in-out;
	transition: opacity 3s ease-in-out;
}
#crossfadingImages img.top:hover{
	opacity: 0;
}
.bottom-image{
	position: absolute;
}
.top-image{
	position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div id="crossfadingImages" class="container">
	<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive bottom-image" alt="..."/> 
        <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive top-image" alt="..."/>
</div>
	   
<div id="about" class="container">
	<div class="row">
		<div class="col-sm-6">
				<p>about...</p>
		</div>
	        <div class="col-sm-6">
				
	        </div>
        </div>
</div>

Bootstrap div没有正确堆叠

2 个答案: