jQuery обратно в исходное состояние после mouseleave

Question

В основном я создаю вкладки с возможностью зависания, вы можете навести ссылку, а затем отобразится новый div, и вы сможете в этом вникнуть.

Моя проблема заключается в том, что после отображения нового div я не могу вернуть обратно div. После того, как новый отображается.

jsfiddle: https://jsfiddle.net/513t1qk2/

Мой JQuery код ниже:

$(document).ready(function() { 
$(".hoverme1").mouseover(function() { 
    $("div.showme1").show(); 
    $("div.placehold").hide(); 
}); 
$(".hoverme1, div.showme1").mouseleave(function() { 
    $("div.showme1").hide(); 
}); 
$("div.showme1").mouseover(function() { 
    $(this).stop(true, true).show(); 
}); 
$("div.placehold").show(); 

});

Надеюсь, что jsfiddle имеет смысл.

** EDIT **

Я понимаю, что я могу добавить добавить

$("div.placehold").show(); 

к

$(".hoverme1, div.showme1").mouseleave(function() { 

, но когда я делаю это, как я mouseleaving класс .hoverme1 div .place заменяет .showme1, и я больше не могу вставлять в это.

** NEW ** EDIT

я могу получить эту работу со следующей скрипкой:

https://jsfiddle.net/513t1qk2/3/

Проблемой является функцией MouseLeave, как я mouseleaving в».hoverme1" «.placehold» div возвращается в поле зрения, которое сбивает вновь появившееся поле «.showme1».

Answer 1

Вот рабочий пример, как можно решить проблему. У меня есть немного оптимизировать свой код, вам не нужно столько строки кода для этого :)

$(document).ready(function() { 
 
    var $placeholder = $("div.placehold"); 
 
    
 
    $('.submenu-list').find('a').on('click', function(e) { 
 
    \t e.preventDefault(); 
 
    }); 
 
    
 
    $('.submenu-list').children('li').find('a').on('mouseenter', function() { 
 
    \t var $current = $(this); 
 
    var $link = $(this); 
 
    
 
    if($link.attr('class').indexOf('hoverme')) { 
 
    \t return; 
 
    } 
 
    
 
    var toShowItemSelector = '.showme' + $link.attr('class').match(/\d+/)[0]; 
 
    $placeholder.hide(); 
 
    $("*[class*='showme']").hide(); 
 
    $("*[class*='showme']").stop(); 
 
    $(toShowItemSelector).fadeIn(400); 
 
    }); 
 
    
 
    $('.product-submenu-container').on('mouseleave', function(e) { 
 
    $("*[class*='showme']").hide(); 
 
    $placeholder.show(); 
 
    }); 
 
    
 
    $('.product-submenu-container').on('mouseover', function(e) { 
 
    if($(e.target).hasClass('medium-3 columns')) { 
 
     $("*[class*='showme']").hide(); 
 
     $placeholder.show(); 
 
    }  
 
    });  
 
});

.showme1, .showme2, .showme3, .showme4 { 
 
    display: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="product-submenu-container"> 
 
    <div class="row collapse"> 
 
    <div class="medium-3 columns"> 
 
     <h3>products</h3> 
 
     <ul class="submenu-list"> 
 
     <li><a href="#!" class="hoverme1">KB1</a></li> 
 
     <li><a href="#!" class="hoverme2">KB2</a></li> 
 
     <li><a href="#!" class="hoverme3">KB3</a></li> 
 
     <li><a href="#!" class="hoverme4">REED</a></li> 
 
     </ul> 
 
    </div> 
 
    <div class="medium-9 columns"> 
 
     <div class="product-banner placehold"> 
 
     <h3>This is some placeholder text</h3> 
 
     <p>This is some placeholder text, it should sit next to the list and 
 
     should be visible when nothing else is hovered.</p> 
 
     </div> 
 
     <div class="product-banner showme1"> 
 
     <div class="row"> 
 
      <div class="large-8 columns"> 
 
      <h3>KB1</h3> 
 
      <p><em>Some placeholder text</em></p> 
 
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibu 
 
      s dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p> 
 
      </div> 
 
      <div class="large-4 columns"> 
 
      <img src="http://placehold.it/200" /> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="product-banner showme2"> 
 
     <h3>KB2</h3> 
 
     </div> 
 
     <div class="product-banner showme3"> 
 
     <h3>KB3</h3> 
 
     </div> 
 
     <div class="product-banner showme4"> 
 
     <h3>REED</h3> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Или проверка этого jsfiddle он включает также анимацию (замирания).

Answer 2

На MouseLeave показать свою .placehold ДИВ Попробуйте Jsfiddle

$(".hoverme1, div.showme1").mouseleave(function() { 
    $("div.showme1").hide(); 
    $("div.placehold").show(); 
}); 

Answer 3

Предлагаю вам использовать id вместо класса для селектора на js. Я думаю, что это будет полезно для вас с меньшим количеством кодов.

$(document).ready(function() { 
var currentTargetDivId; 
    $("a[targetDiv*='showme']").hover(
    function(){ 
    currentTargetDivId = "#"+$(this).attr("targetDiv"); 
    $("#placehold").hide(); 
    $(currentTargetDivId).show(); 
    }, 
    function(){ 
    currentTargetDivId = "#"+$(this).attr("targetDiv"); 
    $("#placehold").show(); 
    $(currentTargetDivId).hide(); 
    } 
); 
}); 

https://jsfiddle.net/513t1qk2/10/