【发布时间】：2017-12-26 03:44:07
【问题描述】：
所以我基本上有一个箭头类型的东西，当你将鼠标悬停在它上面时我想向上移动，然后当你鼠标移开时再向下移动。为此，我将箭头放在父 div 内，并检测来自父 div 的鼠标悬停。这是我的代码：
HTML：
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>
CSS：
.outercircle {
border: 1px solid black;
margin-top: 80vh;
width: 80px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.circle {
width: 60px;
height: 60px;
border: 7px solid black;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.innercircle {
display: inline-block;
margin-top: 15%;
margin-left: 24.5%;
width: 40%;
height: 40%;
border-top: 7px solid black;
border-right: 7px solid black;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
JavaScript：
<script>
$(document).ready(function() {
var $outercircle = $(".outercircle");
var $circle = $(".circle");
$outercircle.hover(function() {
$circle.animate({
marginTop: 0
}, 200);
});
$outercircle.mouseout(function() {
$circle.animate({
marginTop: 20
}, 200);
});
})
</script>
问题在于，只有当您将鼠标悬停在 内潜 (.innercircle) 上时它才会起作用。此外， cursor: 指针也仅适用于 .innercircle 。非常感谢任何帮助，祝您节日快乐。
编辑：看到这个简化版本可以在 jsfiddle 上运行，这里是所有的 HTML 和 CSS，以防它与此有关。
HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylz.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Thomas Urbanak</title>
<script>
$(document).ready(function() {
var $outercircle = $(".outercircle");
var $circle = $(".circle");
$outercircle.mouseenter(function() {
$circle.animate({
marginTop: 0
}, 200);
});
$outercircle.mouseleave(function() {
$circle.animate({
marginTop: 20
}, 200);
});
})
</script>
</head>
<body>
<div id="titlet">
<ul id="menu">
<li class="menu"><a href="#">home</a></li>
<li class="menu"><a href="#">work</a></li>
<li class="menu"><a href="#">about</a></li>
</ul>
<h1 class="title">BOB.BLUBLA</h1>
<hr>
<p class="subtitle">This is a paragraph, made up of words.</p>
</div>
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>
</body>
</html>
CSS：
/*menu*/
#menu {
font-family: "Roboto", sans;
font-size: 20px;
}
.menu {
display: inline-block;
}
a {
text-decoration: none;
color: black;
-webkit-transition: border-bottom .15s;
transition: border-bottom .15s;
}
a:hover {
border-bottom: 5px solid #ff5c5c;
}
#menu, .menu {
list-style: none;
margin-left: 20px;
margin-right: 20px;
padding: 0;
}
/*title tile*/
#titlet {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100vh;
width: 100%;
}
.title {
font-family: "titlefont", sans;
text-align: center;
font-size: 90px;
margin-top: 250px;
}
hr {
width: 20%;
height: 7px;
background: black;
border: none;
margin-top: -50px;
}
.subtitle {
text-align: center;
font-family: "Roboto", sans;
font-size: 20px;
}
/*circle*/
.outercircle {
border: 1px solid black;
margin-top: 80vh;
width: 80px;
margin-left: auto;
margin-right: auto;
cursor: pointer;
}
.circle {
width: 60px;
height: 60px;
border: 7px solid black;
border-radius: 50%;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
.innercircle {
display: inline-block;
margin-top: 15%;
margin-left: 24.5%;
width: 40%;
height: 40%;
border-top: 7px solid black;
border-right: 7px solid black;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
【问题讨论】：
标签： javascript jquery html css jquery-animate