悬停切换问题

我有一些盒子div，他们有隐藏的子元素，只要我悬停标题的盒子元素隐藏的孩子正在出现它是好的，但如果我悬停盒的身体元素我的身体消失我怎么能修复它呢？悬停切换问题

所以我想要做什么？如果我将鼠标悬停标题，正文元素必须是冲击片雷管（我做到了）

，但如果我将鼠标悬停身体，身体musn't是dissapear

，这就是为什么我如果悬停开箱即用我的身体有要隐藏

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

$(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

来源

2016-10-19 ani_css

固定它：http://codepen.io/ev olutionxbox/pen/PGxqvP =） – evolutionxbox

@evolutionxbox是什么问题？ – Mahi

@Mahi这是一个谜！ - OP的目标是悬停的标题，但只需要目标框... – evolutionxbox

你穿越到标题，然后试图让父元素

试试这个，

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

来源

2016-10-19 12:08:43

唉。你击败了我的答案！（虽然我做了评论...） http://codepen.io/evolutionxbox/pen/PGxqvP – evolutionxbox

超酷！只需将其作为答案发布。我没有注意到。 @evolutionxbox –

非常好 –

尝试这个

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

来源

2016-10-19 12:11:34 Rohit

悬停切换问题

回答

相关问题