离开悬停后如何将P标签保持在上一个位置

how to keep p tag on previous position after leave hover?

本文关键字：上一个 位置 标签 悬停 离开      更新时间：2023-09-26

我想在离开悬停后将 p 标签保留在上一个位置，即 top：0px .我在 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>

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

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

jQuery hover接受两个参数，第一个回调用于悬停，第二个回调用于悬停。传递第二个参数并执行相反的操作。

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


$(document).ready(function(){
    var position;
    $('.hexagon-in1').hover(function(){
        animate(185);
    }, 
    function(){ 
    	animate(0); 
    });
    
    
	function animate(position){
    	$('.hexagon-in1 p').animate({
    		"top": position + "px",      
    	});
    }
});
.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>

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

CSS 过渡非常容易做到这一点：

.hexagon-in1 p{
  position: relative;
  font-size: 25px;
  color: #000;
  text-align: center;
  top: 0px ;
  transition:0.5s;
}
.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>

不需要

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>

相关文章：