java - 悬停时将块元素滑出

Question

我有一个图像，上面有一个信息框，下面贴着 css。

正常情况是在将鼠标悬停在图像上时出现这种情况，但是，我想要相反。我希望框在悬停图像时滑出/向下约-50px。有人对此有提示吗？

.imgTitleInfoTop {
    -moz-box-sizing: border-box;
    bottom: 0;
    font-size: 24px;
    font-weight: 500;
    height: 60px;
    line-height: 22px;
    width: 370px;
}

Answer 1

据我了解，您希望在悬停图像时隐藏 .imgTitleInfoTop 元素，因此代码应如下所示：

<script type="text/javascript">
 $('.yourImage').hover(function() {
  $(.imgTitleInfoTop).animate({
   height: 0
  }, 300);
 }, function() {
  $(.imgTitleInfoTop).animate({
   height: '60px'
  }, 300);
 });
</script>

（300是以毫秒为单位的时间，这个动作需要多少时间，所以你可以让它更快或更慢）

Answer 2

您是否正在寻找这样的东西（使用 Jquery）？

<script type="text/javascript">
 $('.imgTitleInfoTop').hover(function() {
  $(this).animate({
   height: 0
  }, 300);
 }, function() {
  $(this).animate({
   height: '60px'
  }, 300);
 });
</script>