所以我基本上得到了一个箭头类型的东西，当你将鼠标悬停在它上面时我想向上移动，然后当你将鼠标移开时又向下移动。为此，我将箭头放在父 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>
问题是它只有在您将鼠标悬停在 inner dive (.innercircle) 上时才有效。此外，光标:指针也仅适用于 .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);
}
最佳答案
我认为您的问题在于您使用了错误的事件处理程序。
您是否尝试过使用 mouseenter 和 mouseleave 而不是 hover 和 mouseout ？
$(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);
});
});.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);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outercircle">
<div class="circle">
<div class="innercircle"></div>
</div>
</div>关于javascript - 仅适用于内部 Div 的属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47973676/