我试图让 div 内的图像在鼠标悬停在其上方时反弹。
为了解释我遇到的问题，我在下面的代码片段中快速模拟了我想要发生的情况。
我希望每当我的鼠标移到图像/文本/任何内容上时，文本都会稍微弹起。
我唯一能想到的是，只要元素属于 flex 盒方案的一部分，它们就不会反弹，但是，我无法找到任何文档来证明这一点。
有人可以解释一下如何在使用 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>最佳答案
我添加了 jquery-ui 脚本/css，它工作正常:
您使用的反弹效果是 jQuery UI library 的一部分- 参见this for reference .
请参阅下面的演示:
$(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;
justify-content: space-around;
align-items: center;
}
.dog {
background-color: red;
height: 100px;
width: 100px;
}
.cat {
background-color: blue;
height: 100px;
width: 100px;
}<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>关于javascript - 如果 div 是 Flex 的，我可以使其弹跳吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41269551/