Question

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

我的问题是，一旦显示了新的div，我就无法在显示新的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”字段击倒。

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它还包括动画（褪色）。

Answer 2

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

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

Answer 3

我建议你在js上使用id而不是class for selector。我认为这对你来说对你来说很有用。

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

在mouseleave之后jQuery回到原始状态

3 个答案: