Question

我在div上使用mouseenter和mouseout时遇到了一个非常奇怪的问题。如果我将文本悬停在来自上方或下方的div中，一切正常。将显示“切换”文本<p style="padding-left: 30px;">text</p>，当我删除鼠标时，文本将消失。

但是如果我将鼠标悬停在左侧或右侧，则鼠标输出事件会立即触发，文字会再次消失。

我没有删除CSS，因为其中一些可能导致问题？非常感谢帮助！谢谢！

jQuery(document).ready(function() {
  jQuery("#fuss_hover").on({
    mouseenter: function() {
      jQuery("#fuss_ak").fadeIn(500);
    }
  });
  jQuery("#fuss_hover").on({
    mouseout: function() {
      jQuery("#fuss_ak").fadeOut(500);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover" style="margin: 6px 0px 6px 90px; width: 48%;"><span style="font-family: 'book antiqua',palatino; font-size: 14pt;">*</span><span style="font-family: 'book antiqua',palatino; font-size: 14pt; border-bottom: 1px dotted #000; cursor: help;">Mouseover Text</span>
</div>
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;">
  <p style="padding-left: 30px;">text</p>
</div>

Answer 1

mouseout会在任何其他元素之后立即触发，而不是目标悬停 - 并且包含子元素。

mouseenter的正确对应方为mouseleave，而不是mouseout。

Answer 2

问题在于您使用mouseout以及您没有stop()连续事件在队列中添加新动画的事实。

要解决此问题，请使用mouseleave并在stop(true) / fadeIn之前致电fadeOut。然后，您还可以简化代码，只需使用hover()（因为它使用前面提到的事件）并使用fadeToggle()。

我还强烈建议您使用外部样式表而不是内联CSS。试试这个：

$("#fuss_hover").hover(function() {
  $("#fuss_ak").stop(true).fadeToggle(500);
});

#fuss_hover {
  margin: 6px 0px 6px 90px;
  width: 48%;
  font-family: 'book antiqua', palatino;
  font-size: 14pt;
}
#fuss_hover .text {
  border-bottom: 1px dotted #000;
  cursor: help;
}
#fuss_ak {
  display: none;
  margin: 8px 0px 8px 90px;
  width: 75%;
}
#fuss_ak p {
  padding-left: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover">
  <span>*</span>
  <span class="text">Mouseover Text</span>
</div>
<div id="fuss_ak">
  <p>text</p>
</div>

Answer 3

你可以在触发鼠标时使用delay（）。

＆＃13;

jQuery(document).ready(function() {
        jQuery("#fuss_hover").on({
            mouseenter: function() {
                jQuery("#fuss_ak").fadeIn(500);
            }
        });
        jQuery("#fuss_hover").on({
            mouseout: function() {
                jQuery("#fuss_ak").delay(500).fadeOut(100);
            }
        });
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover" style="margin: 6px 0px 6px 90px; width: 48%;"><span style="font-family: 'book antiqua',palatino; font-size: 14pt;">*</span><span style="font-family: 'book antiqua',palatino; font-size: 14pt; border-bottom: 1px dotted #000; cursor: help;">Mouseover Text</span>
</div>
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;">
    <p style="padding-left: 30px;">text</p>
</div>

＆＃13;

Answer 4

jQuery(document).ready(function() {
  jQuery("#fuss_hover").on({
    mouseenter: function() {
      jQuery("#fuss_ak").fadeIn(500);
    }
  });
  jQuery("#fuss_hover").on({
    mouseout: function() {
      jQuery("#fuss_ak").fadeOut(500);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="fuss_hover" style="font-family: 'book antiqua',palatino; font-size: 14pt;padding: 6px 0px 6px 90px; width: 100%;">*Mouseover Text 
</div>
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;">
  <p style="padding-left: 30px;">text</p>
</div>

jQuery mouseout行为问题

4 个答案: