时间戳

首页 > 解决方案 > 为什么鼠标悬停和鼠标悬停时动画不会重复

jquery - 为什么鼠标悬停和鼠标悬停时动画不会重复

问题描述

我试图让一个显示图像的框悬停在用户悬停在显示框之外时消失。为了实现这一点，我正在使用 jquery 克隆对象，但是在成功动画并用新动画替换旧动画之后，但这不起作用我一直在寻找解决方案，但我找不到修复

我已经尝试删除动画类，但它仍然无法正常工作

html

<div class="hover-box">
</div>

<div class="row">

<a href="#"><img src="Resources/Images/pic.jpg" class=" img1" /></a>

</div>

css

.hover-box{

    position: absolute;
    background-color: #000;
    width: 90%;
    height: 90%;
    border: 1px solid #000;
    z-index: 1;
    display: none;

} 

.hover-box.animated{

    display: block;

}

jQuery

var box =$('.hover-box').clone(true);

$('.img1').hover(function(){

    $('.hover-box').addClass('animated fadeIn ');

});



 $('.hover-box').mouseout(function(){
    $('.hover-box').addClass('animated fadeOut');
     var el = $(this);
     el.before(box);
     el.replaceWith(box);

});

我只是希望该框显示在悬停的图像之上，然后当它们将光标从新悬停的框移开时不显示

标签： jqueryhtmlcss

解决方案

hover()不是同义词mouseenter()。它是 的简写.mouseenter(handlerIn).mouseout(handlerOut)，形式为：.hover(handlerIn, handlerOut)。

如果handlerOut未提供，则假定您希望提供的处理程序在输入和输出状态更改时运行。

因此，您提供的代码执行以下操作：

处理程序：

  • 添加类animated fadeIn

处理程序输出：

  • 添加类animated fadeIn
  • 然后运行第二个绑定中指定的代码， on mouseout。

你可能想要一些类似的东西：

$('.hover-box').hover(
   function() {
     $(this).addClass('hovered');
   },
   function() {
     $(this).removeClass('hovered')
   }
);

仅凭上述内容，您就可以使用 CSS 来调整元素的动画进出方式。

或者，依赖 jQuery 的动画：

$('.hover-box').hover(
  function() {
    $('img', this).fadeIn()
  },
  function() {
    $('img', this).fadeOut()
  }
)

工作示例：

$('.hover-box').hover(
  function() {
    $('img', this).fadeIn()
  },
  function() {
    $('img', this).fadeOut()
  }
)
.hover-box img {
  display: none;
}
.hover-box {
  display: inline-block;
  width: 150px;
  height: 150px;
  border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="hover-box">
  <img src="https://via.placeholder.com/150">
</div>

推荐阅读