React onMouseEnter/onMouseLeave 用于悬停在地图中答案

【问题标题】：React onMouseEnter/onMouseLeave used to hover in a mapReact onMouseEnter/onMouseLeave 用于悬停在地图中
【发布时间】：2019-04-17 11:58:53
【问题描述】：

我目前正在为一个学校项目开发一个约会网站，但我被困住了，不确定我是否走在正确的道路上。

在用户个人资料上，我想要用户选择显示的照片列表，并且我想要将鼠标悬停在指针所在的照片上。

在我的状态下，我添加了一个 listPhotoHover: [ ]，这是一个包含变量 true 或 false 的选项卡。 listPhotoHover[0] = true 表示列表的第一张照片有悬停，false 表示没有悬停。

我使用 onMouseEnter( ) 为每张照片映射并添加一个 div，它获取照片索引并在触发时将其设置为悬停。

如果 listPhotoHover[index] 存在，则悬停出现，悬停 div 有一个 onMouseLeave( ) 获取照片索引并将照片的悬停设置为 false。

一切似乎都正常，但我不确定这是否是最好的方法，当我在每张照片上快速移动时，悬停仍然在那里，我认为 onMouseLeave() 不运行。

这是我的代码

每张照片的地图：

photos.map((photo, index) => {
   return
      <div className={`flex row`} key={index} >
        <img
           className={classes.userPhotos}
           src={photo}
           alt={`photo de ${name}`}
           onMouseEnter={() => { this.haveHover(index) }}
         />
         {
           listPhotoHover[index]
             ? <div
                 className={`
                   absolute flex center alignCenter
                   ${classes.userPhotos} ${classes.photoHover}
                 `}
                  onMouseLeave={
                    () => { this.removeHover(index) }
                  }
               />
             : null
          }
     </div>
   })

触发 onMouseEnter() 或 onMouseLeave() 时的函数：

  haveHover (index, value) {
    const tab = this.state.listPhotoHover
    tab[index] = value
    this.setState({listPhotoHover: tab})
  }

我想知道为什么当我的指针移动非常快时 onMouseLeave() 不起作用，以及在地图上悬停的最佳方法是什么。感谢您的建议，如果我写的英文不正确，请见谅

ps：我检查了以前的问题，但还没有找到任何答案:(

约瑟芬

【问题讨论】：

标签： css reactjs hover

【解决方案1】：

我不相信你需要 javascript 来达到你想要的效果。如果只是在图像悬停时显示某些内容，您可以使用一些高级 CSS 选择器来执行此操作。运行下面的sn-p来

html {
  font-family: sans-serif;
  font-size: 10px;
}

.wrap {
  position: relative;
}

.image {
  width: 80px;
  height: 80px;
}

.imageinfo {
  display: none;
  width: 80px;
  height: 17px;
  background: #cc0000;
  color: #efefef;
  padding: 3px;
  text-align: center;
  box-sizing: border-box;
  position: absolute;
  bottom: -13px;
}


/* here's the magic */

.image:hover+.imageinfo {
  display: block;
}

Hover the image to see the effect
<div class="wrap">
  <img class="image" src="https://www.fillmurray.com/80/80" />
  <div class="imageinfo">
    Bill Murray FTW
  </div>
</div>

【讨论】：

感谢您的回答，我会检查一下！我还发现了如何不使用 javascript，我心不在焉大声笑:(

【解决方案2】：

我刚刚意识到我做错了，我在包含一张照片的 div 上添加了一个带有 '&:hover' 的 className，它可以工作。不需要javascript：D

我不知道为什么我想把它复杂化哈哈..

类名：

ANSWER: {
  '&:hover': {
    opacity: '0.4',
    cursor: 'pointer'
  }
}

带有照片的div：

photos.map((photo, index) => {
 return <div className={`flex row ${classes.ANSWER}`} key={index} >
          <img
            className={classes.userPhotos}
            src={photo}
            alt={`${name}`}
           />
      </div>
  })

希望我的错误能帮助一些人

【讨论】：