javascript - 鼠标移出事件不会移回按钮外

Question

我有一个按钮，当你将鼠标悬停在它上面时，它会显示一些文本和另外 2 个按钮，但是当我将鼠标移出它时，它仍然停留在悬停状态。如何使我的代码工作，以便它在鼠标移开时工作？ 这是我的 Javascript:

var option1Button_Mouseout = function() {
    console.log('option1Button_Mouseout()');

    $('laStyle-option1-button')[0].innerHTML = outputTag;
};

var attachOption1ButtonListeners = function() {
    console.log($('laStyle-option1-button')[0]);
    $('laStyle-option1-button')[0].addEventListener('mouseover', this.option1Button_Mouseover);
    // When you mouse out of the button it brings it back to the original
    $('laStyle-option1-button')[0].addEventListener('mouseout', this.option1Button_Mouseout);
};

window.onload = function() {
    this.attachOption1ButtonListeners();
};

这是目前的样子: https://media.giphy.com/media/9A6MoIdWBiZVFtcHyW/source.mp4

看到当我将鼠标悬停在它上面时它会显示文本和 2 个按钮，当我将鼠标移开时它应该会返回到手的图片。

Answer 1

不清楚你的方法在做什么，考虑这个例子:

HTML

<div id="myDiv">
  <div id="myDiv1"/>
</div> 

JavaScript

$('#myDiv').on("mouseover mouseenter ", function (e) {
   $("#myDiv1").show();
});
$('#myDiv').on("mouseleave mouseout", function (e) {
  $("#myDiv1").hide();
});

当进入父 div 时，将显示内部 div。当离开父 div 时，内部 div 将被隐藏。也像使用 jquery 一样使用 .on。

这是 JSFiddle:https://jsfiddle.net/GR8sk/21/