javascript - mouseleave后jQuery返回原始状态

Question

基本上，我正在构建可悬停的选项卡，您可以悬停一个链接，然后将显示一个新的 div，您可以将鼠标移动到该选项卡中。

我的问题是，一旦显示了新的 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 类时，.placehold div 取代了 .showme1，我无法再将鼠标放入其中。

** 新编辑 **

我可以使用以下 fiddle 来实现它:

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

问题是 mouseleave 函数，当我鼠标离开“.hoverme1”时，“.placehold”div 又回到 View 中，这将新出现的“.showme1”字段击倒。

Answer 1

这是一个如何解决您的问题的工作示例。 我对您的代码进行了一些优化，您不需要为此编写太多代码行:)

$(document).ready(function () {
  var $placeholder = $("div.placehold");
  
  $('.submenu-list').find('a').on('click', function(e) {
  	e.preventDefault();
  });
    
  $('.submenu-list').children('li').find('a').on('mouseenter', function() {
  	var $current = $(this);
    var $link = $(this);
    
    if($link.attr('class').indexOf('hoverme')) {
    	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它还包括动画(淡入淡出)。