Реагируйте на onMouseEnter / onMouseLeave, используемый для наведения на карту - PullRequest
Новая
       4

Реагируйте на onMouseEnter / onMouseLeave, используемый для наведения на карту

0 голосов
/ 14 ноября 2018

В настоящее время я работаю над сайтом знакомств для школьного проекта, но я застрял и не уверен, что я на правильном пути.

В профиле пользователя я хочу списокфотографии, которые пользователь хочет показать, и я хочу навести указатель мыши на фотографию, где находится указатель.

В моем состоянии я добавил listPhotoHover: [] , вкладка, содержащая переменные trueили ложь listPhotoHover [0] = true означает, что первая фотография в списке имеет наведение, false означает отсутствие наведения.

Я отображаю и добавляю div для каждой фотографии с onMouseEnter () , который берет индекс фотографии и устанавливает его наведением курсора при срабатывании.

При наведении указателя появляется listPhotoHover [index] , у элемента hover есть onMouseLeave (), который берет индекс фотографии и устанавливает наведение фотографии как ложное.

Кажется, все работает, но я не уверен, что это лучший способ сделать это, и когда я двигаюсь очень быстроя думаю, что 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: я проверил предыдущие вопросы и пока не нашел ответа: (

Жозефина

Ответы [ 2 ]

0 голосов
/ 14 ноября 2018

Я только что понял, что все сделал неправильно, я добавил className с '&: hover' в div, содержащий одну фотографию, и это работает.Не нужно 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>
  })

Надеюсь, моя ошибка поможет некоторым людям

0 голосов
/ 14 ноября 2018

Я не верю, что вам нужен 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>
...