javascript - 鼠标离开后 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它还包括动画(淡入淡出)。