懸停切換問題

我有一些盒子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

懸停切換問題

回答

相關問題