当鼠标在div #circle上时，我希望#intro中的文本消失，当鼠标在div #circle上的时候回来，我让它工作但是它会消失并且回到maky时代... 救命？而且即使我有位置，盒子也会移动：固定; ，即使文字消失，我希望盒子保持原位。
$(document).ready(function() {
$('#circle').hover(function() {
$('#intro').hide([2]);
$('#intro').show([2]);
});
});html, body {
padding: 0 autp;
margin: 0 auto;
}
#circle {
height: 150px;
width: 150px;
background-color: blue;
border-radius: 25%;
transition: all 1s ease-in-out;
border: black 1px solid;
position:relative; /*gotta put it here too to start it off*/
top:35%;
left:35%;
overflow: hidden;
}
#intro {
text-align: center;
margin-top: 75px;
overflow: hidden;
font-family: 'Indie Flower', cursive;
font-size: 50px;
}
body {
background-color: #cccccc;
}
#circle:hover {
border: black 1px solid;
background-color: red;
border-radius: 50%;
height: 75px;
width: 75px;
transition: 1.5s;
-webkit-animation-name: cruise;
-webkit-animation-duration: 60s;
animation-name: cruise;
animation-duration: 50s;
position:relative;
top:50%;
left:50%;
transition: all 1s linear;
overflow: hidden;
}
#arena {
border: 5px dashed grey;
margin: 0 auto;
width: 550px;
height: 550px;
margin-top: 150px;
background-color: white;
border-radius: 10px;
overflow: hidden;
}
@keyframes cruise {
0% {left:35%; top:35%;}
5% {left:40%; top:40%;}
10% {left:45%; top:45%;}
15% {left:50%; top:43%;}
20% {left:57%; top:50%;}
25% {left:67%; top:40%;}
30% {left:70%; top:27%;}
35% {left:55%; top:35%;}
40% {left:35%; top:67%;}
45% {left:15%; top:40%;}
50% {left:40%; top:65%;}
55% {left:50%; top:25%;}
60% {left:82%; top:65%;}
65% {left:26%; top:15%;}
70% {left:69%; top:70%;}
75% {left:85%; top:15%;}
80% {left:36%; top:78%;}
85% {left:65%; top:41%;}
90% {left:85%; top:26%;}
95% {left:58%; top:78%;}
100% {left:35%; top:35%;}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
AtomTest
</title>
<link rel="stylesheet" style="text/css" href="style.css">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
</head>
<body>
<script src="\html/jquery/jquery-2.2.0.js"></script>
<script src="script.js"></script>
</script>
<h1 id="intro">
<ins>HÅLL MUSEN PÅ DEN BLÅA FYRKANTEN</ins>
</h1>
<div id="arena">
<div id="circle">
</div>
</div>
</body>
</html>你在同一个事件上宣布hide()和show().i.e，在mouseenter。相反，你需要在show()上声明你的mouseleave。
$(document).ready(function() {
$('#circle').hover(
function() { // mouseenter event equivalent in hover
$('#intro').hide([2]);
},
function() { // mouseleave event equivalent in hover
$('#intro').show([2]);
});
});