использование дисплея css при наведении курсора на - PullRequest
Новая
       11

использование дисплея css при наведении курсора на

0 голосов
/ 29 апреля 2020

Благодарность всем! Я хочу реализовать функцию в reactJS, <button />, скрытую при загрузке страницы, и будет отображаться при наведении курсора на нее, я пробовал много способов, но все еще не решил проблему. Там мои коды, thx каждый мастер. 

.leftButton {
  margin-top: 290px;
  border: none;
  outline: 0;
  padding: 0;
  height: 36px;
  width: 36px;
  transition: 3s;
  border-radius: 50%;
  background-color: #314561;
  color: #fff;
  position: absolute;
  top: 50%;
  //z-index: 10;
  transform: translateY(-50%);
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  display: none;

  &:hover {
   display: block;
  }
}

render() {
return <button className={styles.leftButton>
}

к тому времени, я обнаружил, что кто-то сказал, использовать наклейку этикетки, я пытался, все еще не работает 

.father {
  cursor: pointer;
}

.leftButton:hover .father {
  cursor: pointer;
  display: block;
}


return(
 <div className={styles.father}>
    <button className={styles.leftButton} />
 </div>);

1 Ответ

0 голосов
/ 29 апреля 2020

Не нужно оборачивать вашу кнопку, просто используйте это css: 

.leftButton {
  cursor: pointer;
  opacity: 0;
}

.leftButton:hover {
  opacity: 1;
}

<button className={styles.leftButton} />
...