Question

我有列，我想在鼠标悬停在图像上方时显示图像，但是，当我在同一图像上移动时，mouseover和mouseout会不断触发。因此图像不断闪烁。我该如何解决？

我过滤了图像类（媒体叠加层）以更改其显示

这是我的例子 https://jsfiddle.net/saltykiam/bw4ap70v/5/

<Header style={style.header}>
  <Left style={{ paddingLeft: 10 }}>
    {props.previous ? BackButton(navigation) : null}
  </Left>
  <Body style={{ width: WIDTH - 75 }}>
    <Text style={style.title} numberOfLines={1}>App Sample</Text>
  </Body>
  <Right style={{ paddingRight: 10 }}>
    {showMenu(route) ? <TouchableOpacity hitSlop={{
      top: 10,
      bottom: 10,
      left: 10,
      right: 10
    }} onPress={() => props.toggleMenu()}>
      <Icon style={style.icon} name="md-menu" />
    </TouchableOpacity> : null}
  </Right>
</Header>

Answer 1

问题在于，当您调用“ onmouseover”事件时，图片被设置为

toctree.caption

这实际上从页面上删除了图像，所以现在当您将鼠标移到任何地方时，您实际上都在调用“ onmouseout”事件。这是因为图像不再在页面上，没有物理尺寸，因此任何鼠标移动都被视为将鼠标移出图像。

要解决此问题，请将样式更改应用于不透明而不是显示。希望图像消失时将不透明度设置为0：

display: none;

，当您要重新显示图像时，将不透明度设置为1：

row.onmouseover = (e) => {
  [...e.path].filter(element =>
    element.classList && element.classList.contains("media-overlay"))[0].style.opacity = 0;}

鼠标悬停和鼠标悬停时不断闪烁和触发

1 个答案: