Hover toggle issue

У меня есть некоторые div div и у них есть скрытый дочерний элемент всякий раз, когда я нахожу заголовок элемента элемента скрытого дочернего элемента, кажется, что все нормально, но если я нахожу элемент тела в ящике, тоже мое тело исчезает, как я могу исправить Это ?Hover toggle issue

так что я хочу сделать? если я парить название, тело элемент должен быть apper (я это сделал)

но если я парить тело, тело musn't быть

исчезнуть

, и именно поэтому я, если парения из коробки моего тела быть скрыты

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

Fixed это: http://codepen.io/ev olutionxbox/pen/PGxqvP =) – evolutionxbox

@evolutionxbox В чем была проблема? – Mahi

@ Махи это тайна! - ОП ориентировался на заголовок, чтобы навести курсор, но ему нужно было только настроить таргетинг на ящик ... – evolutionxbox

Вы обходе в названии, а затем пытается получить родительские элементы

Попробуйте это,

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

источник

2016-10-19 12:08:43

Aw. Вы избили меня до ответа! (хотя я ответил как комментарий ...) 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

Hover toggle issue

ответ

Смежные вопросы