鼠标离开后jQuery恢复到原始状态答案

【问题标题】：jQuery back to original state after mouseleave鼠标离开后jQuery恢复到原始状态
【发布时间】：2016-10-18 10:41:55
【问题描述】：

基本上我正在构建可悬停的标签，您可以悬停一个链接，然后将显示一个新的 div 并且您可以将鼠标移入其中。

我的问题是，一旦显示了新的 div，我就无法在显示新的 .placehold div 后恢复它。

我的 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，我不能再将鼠标移入这个。

** 新编辑 **

我可以用下面的小提琴来解决这个问题：

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

问题在于 mouseleave 函数，当我将鼠标离开“.hoverme1”时，“.placehold” div 会重新出现在视图中，这会将新出现的“.showme1”字段击倒。

【问题讨论】：

stackoverflow.com/questions/5557641/… 试试这个
如果你不想再做一场演出，那么你想要达到的目标是没有意义的。在 chrome 上，我永远无法将鼠标悬停在 showme1 div 中，因为它在我的鼠标靠近它之前就消失了
抱歉，我确实想再次显示 .placehold，一旦用户将鼠标悬停在链接上并可以移动到链接上，我想将其恢复。

标签： javascript jquery html tabs

【解决方案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，它还包括动画（褪色）。

【讨论】：

只有一个问题，我需要用户能够通过鼠标进入新打开的“showme”类。
对不起，我不明白你的意思？ ://
对不起，我没有解释清楚。用户需要能够将鼠标移入“showme”类才能单击其中的链接。请看小提琴，希望这更有意义：jsfiddle.net/513t1qk2/8
好的，我了解您的问题。如果用户悬停，您希望用户可以单击/标记我们显示的内容中的某些内容，对吗？然后在这里查看更新的小提琴......使用全页模式
是的，没错！你能重新发送小提琴吗？

【解决方案2】：

在 mouseleave 上显示您的 .placehold div 试试这个Jsfiddle

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

【讨论】：

我可以这样做，但是当我离开“.hoverme1”类时，在我能够到达 .showme1 之前添加了 .placehold
对不起，我没有很好地解释自己。
请看下面的jsfiddle：jsfiddle.net/513t1qk2/3这是正确的想法，但是当我将鼠标移入新打开的“.showme1”时，因为我正在离开“.hoverme1”，.placehold 出现了一点太早了
@scctttt1991 不要使用fadeIn 和fadeOut。试试这个jsfiddle.net/513t1qk2/4。我认为它会很有用我用鼠标离开事件为ul
这是有效的，问题是当我鼠标离开“.hoverme1”类时触发了mouseleave事件，这在我有机会使用鼠标之前将“.placehold”带回了视野进入新添加的“.showme1” div。希望这是有道理的？

【解决方案3】：

我建议你在 js 上使用 id 而不是 class 作为选择器。我认为这对您使用更少的代码很有用。

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

【讨论】：