Question

当我的鼠标盘旋在它上面时，我试图让div中的图像反弹。

为了解释我遇到的问题，我在下面的代码片段中快速模拟了我想要发生的事情。

每当我的鼠标移过图像/文本/其他任何内容时，我希望文本稍微反弹。

我唯一可以想象的是，只要项目是flexbox方案的一部分，项目就不会反弹，但是，我无法找到任何证明这一点的文档。

在使用flexbox时，有人可以解释一下如何让它反弹吗？

$(document).ready(function() {
  $('.text').hover(function() {
   $(this).toggle("bounce",{times: 3}, "slow");
    });
});

.one{
  margin:0;
  }

.container{
  height:500px;
  width:500px;
  background-color:gray;
  display:flex;
  flex-wrap:wrap;
  align-items:horizontally;
  justify-content:space-around;
  align-items:center;
   }
.dog{
  background-color:red;
  height:100px;
  width:100px;
  }
.cat{
  background-color:blue;
  height:100px;
  width:100px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    </head>
  <body>
    <div class="one">
      <div class="container">
        <div class="dog">
          <div class="text">Hello Dog</div>
        </div>
        <div class="cat">
          Hello Cat
        </div>
      </div>
    </body>

Answer 1

我在jquery-ui scripts / css中添加了它并且工作正常：

您正在使用的跳出效果是jQuery UI library的一部分 - 请参阅this for reference。

见下面的演示：

＆＃13;

$(document).ready(function() {
  $('.text').hover(function() {
    $(this).toggle("bounce", {
      times: 3
    }, "slow");
  });
});

＆＃13;

.one {
  margin: 0;
}
.container {
  height: 500px;
  width: 500px;
  background-color: gray;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.dog {
  background-color: red;
  height: 100px;
  width: 100px;
}
.cat {
  background-color: blue;
  height: 100px;
  width: 100px;
}

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="one">
    <div class="container">
      <div class="dog">
        <div class="text">Hello Dog</div>
      </div>
      <div class="cat">
        Hello Cat
      </div>
    </div>
</body>

＆＃13;

Answer 2

从我提供的链接获取css文件并添加到head部分，然后在文本或按钮或图像上使用特定的keeywords，它应该工作。链接是http://ianlunn.github.io/Hover/

如果它是弹性的，我可以进行div反弹吗？

2 个答案: