Question

我有一个按钮，当你将鼠标悬停在它上面时，它会显示一些文字和另外两个按钮但是当我将鼠标移出它时，它仍然会停留在悬停上。如何使我的代码工作，以便它可以在鼠标输出时工作？这是我的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/

Answer 2

由于你已经在使用jQuery，我会使用它的Mouseenter和mouseleave事件，如下所示：

$("document").ready(function(){ 
    $(".laStyle-option1-button img").mouseenter(function(){       
        $(this).attr('src','https://media.giphy.com/media/xUOwGdPZ0chBWiQ6Ri/giphy.gif');      
    });     
    $(".laStyle-option1-button img").mouseleave(function(){       
        $(this).attr('src','https://media.giphy.com/media/l4pTgiQB2e2dpuKs0/giphy.gif');      
    }); 
});

要注意事项：

您没有添加'。'到jQuery对laStyle-option1-button的引用的开头（看看之前的时间段），因为它是一个类属性。
您正在执行不必要的事件侦听器加载。虽然这对于绑定点击事件很有帮助，但我只想使用'bind'方法将函数绑定到点击事件：

$（“＃btnButton”）。绑定（“点击”，myFunction）;
您需要更改图像的'src'属性，或者只需完全删除按钮并替换另一个按钮。前者表现更好。

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

2 个答案: