Question

我有一个标题，当鼠标悬停在标题上时我想在右侧显示图像。

我在设置为true / false的状态下维护变量 editMode
然后我使用onMouseOver和onMouse事件有条件地渲染图像。

现在当我将鼠标悬停在标题上时，编辑模式设置为true并显示图像，当我将光标移出标题时，editMode设置为false并且图像消失。

我在设置为true / false的状态下维护变量 editMode ，通常使用onMouseOver和onMouse渲染图像：

问题：当我将鼠标悬停在编辑图标上时，它会开始闪烁。

  var checkList = [2, 4, 5, 7];
  $("#update").on('click', function() {
        $("#list").val(checkList).trigger("change");
  });

您可以在此处找到此代码：http://jsfiddle.net/Lu4w4v1c/2/

如何阻止这种闪烁。 我也尝试使用onMouseEnter和onMouseLeave 按照建议的here但它没有用。我不知道如何使用这两个事件导致我想要的相反。第一次加载组件时，一切都很好，但只要我将鼠标悬停在图标上，整个动态就会发生变化。当鼠标悬停在标题上时，图标会显示，当鼠标悬停在标题上时，图标不会显示。请帮忙

onMouseEnter和onMouseLeave的代码在这里：http://jsfiddle.net/Lu4w4v1c/3/

Answer 1

当您在h3上有监听器时，最初图像不会被渲染，所以第一次看起来一切正常，但是一旦渲染图像并将鼠标悬停在图像上，它就会响应标题的mouseout事件并立即隐藏图像，然后在h3上触发鼠标悬停，导致闪烁行为。

要解决您的问题，您只需将侦听器附加到容器上即可。使用

更新了您的小提琴http://jsfiddle.net/Lu4w4v1c/4/

<div  onMouseOut={this.editModeToggler} 
    onMouseOver={this.editModeToggler}>
  <h3>
    Title
  </h3>
  {this.state.editMode?
        <img src='http://www.rebanet.it/images/banners/iscrizioni.png' />
    :
    null
  }
</div>

Answer 2

如果你有一个容器要进行onmouseover事件渲染div，你应该使用onMouseLeave。示例小提琴也有onmouseleave。

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseleave_mouseout

这显示了问题

有条件地渲染图像时React中的图像闪烁问题

2 个答案: