Question

我有一些盒子div，他们有隐藏的子元素，每当我悬停盒子元素隐藏的孩子的标题出现它没关系但如果我悬停盒子的身体元素我的身体是消失我怎么能解决它？ / p>

所以我想做什么？如果我悬停标题，身体元素必须是apper（我做了）

但如果我在身体上盘旋，身体就不会消失了

这就是为什么我如果悬停在盒子外面我的身体必须隐藏

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();
  })
});

click to see demo

Answer 1

您正在遍历标题，然后尝试获取父元素

试试这个，

$(document).ready(function(){
  $(".box").hover(function(){
    $(this).find(".toggle").stop().slideDown();
  },function(){
    $(this).find(".toggle").stop().slideUp();
  })
});

Answer 2

试试这个

$(document).ready(function(){
  $(".box .title, .toggle").hover(function(){
    $(this).parents(".box").find(".toggle").stop().slideDown();
  },function(){
    $(this).parents(".box").find(".toggle").stop().slideUp();
  })
});

悬停切换问题

2 个答案: