我有一些盒子 div，每当我将鼠标悬停在盒子元素的标题上时，它们就会隐藏子元素 隐藏的子元素出现时没关系，但是如果我也将盒子的 body 元素悬停在盒子上，我的 body 就会消失，我该如何修复它？
那我想做什么？ 如果我悬停标题，body 元素必须是 apper(我做到了)
但是如果我悬停 body ， body 一定不会消失
这就是为什么如果悬停在盒子外面我的 body 必须隐藏
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div class="box">
<div class="title">Title</div>
<div class="toggle">
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias et omnis optio ratione. Sint veniam, reiciendis aliquam atque impedit est earum. Placeat culpa, assumenda ad dolorum? Rerum hic nesciunt optio!</p>
</div>
<div class="footer">
@copyright bla bla..
</div>
</div><!-- toggle-->
</div>
<div class="box">
<div class="title">Title</div>
<div class="toggle">
<div class="body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias et omnis optio ratione. Sint veniam, reiciendis aliquam atque impedit est earum. Placeat culpa, assumenda ad dolorum? Rerum hic nesciunt optio!</p>
</div>
<div class="footer">
@copyright bla bla..
</div>
</div><!-- toggle-->
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</body>
</html>
CSS
*{margin:0;padding:0;}
body{
margin:50px;
}
.box{
width:300px;
float:left;
margin-right:20px;
}
.title,.body,.footer{
padding:7px;
}
.title{
background:red;
}
.body{
background:yellow;
}
.footer{
background:black;
color:white;
}
.toggle{
display:none;
}
JS
$(document).ready(function(){
$(".box .title").hover(function(){
$(this).parents(".box").find(".toggle").stop().slideDown();
},function(){
$(this).parents(".box").find(".toggle").stop().slideUp();
})
});
最佳答案
你正在遍历到标题，然后尝试获取父元素
试试这个，
$(document).ready(function(){
$(".box").hover(function(){
$(this).find(".toggle").stop().slideDown();
},function(){
$(this).find(".toggle").stop().slideUp();
})
});
关于javascript - 悬停切换问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40130918/