Question

当鼠标悬停在div上时，第二个div会向下滑动，而不会将幻灯片悬停回来。我在另一方面遇到了问题。是否有一种方法可以让div在悬停时向上滑动，并在不悬停时向下滑动？基本上，它会滑入悬停的div

＆＃13;

function animationRollover(element, rollover) {
  $(element).hover(function() {
    $(rollover).slideDown();
  }, function() {
    $(rollover).slideUp();
  });
};
animationRollover('#divImage1', '#divTextImage1');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divImage1" style="float: left; width: 280px; margin-left: 40px; border: 1px solid">
  <div style="height: 50px;">
    test
  </div>
  <div id="divTextImage1" style="width: 280px; height: 20px; background-color: rgba( 0,0,0,0.6 ); float: left; position: absolute; opacity: 0.5; color: white; display: none;">
    test
  </div>
</div>

＆＃13;

Answer 1

从display: none;样式属性中移除<div id='divTextImage1'" ..>，并使用slideUp反转slideDown。

＆＃13;

function animationRollover(element, rollover) {
  $(element).hover(function() {
    $(rollover).slideUp();
  }, function() {
    $(rollover).slideDown();
  });
};
animationRollover('#divImage1', '#divTextImage1');

＆＃13;

#divImage1 {
  position: relative;
}

#divTextImage1 {
 position: absolute;
 bottom: 0;
}

＆＃13;

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<div id="divImage1" style="float: left; width: 280px; margin-left: 40px; border: 1px solid">
		<div style="height: 50px;">
			test image
			<div id="divTextImage1" style="width: 280px; height: 20px; background-color: rgba( 0,0,0,0.6 ); float: left; position: absolute; opacity: 0.5; color: white;">
				test text
			</div>
		</div>
	</div>

＆＃13;

向下滑动并向上滑动

1 个答案: