Question

我希望在离开 top：0px 之后将 p 标记保留在之前的位置。我在css中将 top：0px 添加到 p 但无效。有什么建议吗？请帮忙。谢谢。以下是Snippet for it。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

Answer 2

jQuery hover接受两个参数首先回调用于悬停，第二个回调用于悬停。传递第二个参数并反过来。

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

Answer 3

.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>

<script language=javascript>
<!--
if ((navigator.userAgent.match(/iPhone/i)) ||   
(navigator.userAgent.match(/iPod/i))) {
location.replace("http://url-to-send-them/iphone.html");
}
-->
</script>

Answer 4

一旦触发了jquery动画，CSS就会被应用并保留。一旦你不悬停它，你需要在此时覆盖它。

CSS过渡非常容易：

＆＃13;

.hexagon-in1 p{
  position: relative;
  font-size: 25px;
  color: #000;
  text-align: center;
  top: 0px ;
  transition:0.5s;

}
.hexagon-in1:hover p {
  top:185px;
  }

＆＃13;

 <div class="hexagon hexagon-scale"><div class="hexagon-in1"><div class="hexagon-in2 red bgone"><p>Beach House</p></div></div></div>

＆＃13;

Answer 5

不需要jQuery man。你只能用css做。

.hexagon-in1 p{
  position: relative;
  font-size: 25px;
  color: #000;
  text-align: center;
  top: 0px ;
  transition:.7s all;

}

.hexagon-in1:hover p{
  top: 185px ;
}

 <div class="hexagon hexagon-scale"><div class="hexagon-in1">
   <div class="hexagon-in2 red bgone"><p>Beach House</p></div></div></div>

离开后如何将p标签保留在先前的位置？

5 个答案: