javascript - 离开悬停后如何将 p 标签保持在先前的位置？

Question

我想在 top:0px 悬停后将 p 标记保留在之前的位置。我在 css 中将 top:0px 添加到 p 但没有工作。有什么建议吗？请帮忙。谢谢。 下面是它的片段。

$(document).ready(function(){
  $('.hexagon-in1').hover(function(){
    $('.hexagon-in1 p').animate({
       "top":"185px",      
       })
  });
});

.hexagon-in1 p{
  position: relative;
  font-size: 25px;
  color: #000;
  text-align: center;
  top: 0px ;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red bgone"><p>Beach House</p></div></div></div>

Answer 1

没有“循环”问题的可能解决方案

$(document).ready(function(){
  $('.hexagon-in1')  .mouseover(function() {
  $('.hexagon-in1 p').stop().animate({
       "top":"185px",      
       });
  })
  .mouseout(function() {
   $('.hexagon-in1 p').stop().animate({
       "top":"0px",      
       });
  });
});

.hexagon-in1 p{
  position: relative;
  font-size: 25px;
  color: #000;
  text-align: center;
  top: 0px ;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red bgone"><p>Beach House</p></div></div></div>