mouseleave 후 jQuery 원래 상태로 돌아 가기

Question

기본적으로 마우스를 올려 놓을 수있는 탭을 만들고 있습니다. 링크를 가리키면 새 div가 표시되고 마우스를 클릭 할 수 있습니다.

내 문제는 일단 새로운 div가 표시되면 .placehold 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는 의미가 있습니다.

** 수정 **

내가 추가 할 수 있음을 이해

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

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

-

하지만 난 할 때 이것을 나는 .hoverme1 클래스를 mouseleaving하고로 .place div는 .showme1을 대체하며 더 이상 마우스를 마우스 오른쪽 단추로 끌 수 없습니다.

** NEW EDIT **

나는이 다음과 바이올린 작업을 얻을 수

: 나는 ".hoverme1을"mouseleaving하고 같이

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

문제는하는 MouseLeave의 함수를 ".place"div가 새로 등장한 ".showme1"필드를 두드리는보기로 돌아옵니다. 하는 MouseLeave에

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

은 .placehold 사업부는 다음은이 Jsfiddle

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

Answer 3

js의 selector 대신 class id를 사용하는 것이 좋습니다. 나는 이것이 적은 코드로 당신에게 도움이 될 것이라고 생각합니다.

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