Question

我目前正在一个学校项目的约会网站上工作，但是我被困住了，不确定我的方法是否正确。

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

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

我使用 onMouseEnter（）映射并为每张照片添加div，该索引会获取照片索引并在触发时将其设置为悬停。

如果存在 listPhotoHover [index] ，则将出现悬停，悬停div的 onMouseLeave（）会获取照片索引并将照片的悬停设置为false。

一切似乎都可以正常工作，但是我不确定这是否是最好的方法，当我快速移动每张照片时，悬停仍然存在，我认为 onMouseLeave（）不会运行< / strong>。

这是我的代码

每张照片的地图：

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：我检查了先前的问题，但尚未找到任何答案：（

约瑟芬

Answer 1

我认为您不需要使用JavaScript即可达到所需的效果。如果只是在悬停图像时显示某些内容，则可以使用一些高级CSS选择器来执行此操作。运行下面的代码段

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>

Answer 2

我刚刚意识到自己做错了所有事，我在div上添加了一个带有'＆：hover'的className，并且包含一张照片，它可以正常工作。不需要javascript：D

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

className：

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>
  })

希望我的错误对某些人有帮助

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

2 个答案: