Как сделать, что бы ховер на элемент применялся и к детям?

Question

[Nikita Shchypylov]

Всем привет
Проблема в том, что при ховере на .top-menu__user появляется .user-logout, но как только я убираю ховер с .top-menu__user, .user-logout схлопывается. Как это можно пофиксить?
Такой код :

userHoverIn = () => {
    this.setState({
      onHoverUser: true
    })
  };
  userHoverOut = () => {
    this.setState({
      onHoverUser: false
    })
  };

return (
        <div
            onMouseOver={this.userHoverIn}
            onMouseOut={this.userHoverOut}
            className="top-menu__user">
          <img className="user-icon" src="/img/logo.jpg" alt=""/>
          <span>{user}</span>
          <Link className={this.state.onHoverUser ? "user-logout" : "user-logout hide"} to="/">
            <MdExitToApp className="icon"/>
            Logout
          </Link>
          <div className="icon"><MdArrowDropDown/></div>
        </div>
    );

.top-menu__user {
    display: flex;
    align-items: center;
    position: relative;
}

.user-logout {
  position: absolute;
  bottom: -25px;
  justify-content: center;
  align-items: center;
  width: 100%;
  color: $orange;
  display: flex;
  &.hide {
    display: none;
  }
  .icon {
    font-size: 20px;
    margin-right: 5px;
  }
}

Comments

[Антон Спирин]

Странная задача. Если не надо прятать user-logout по событию onMouseOut, то зачем его вообще обрабатывать? Ведь this.state.onHoverUser в вашем коде влияет только на состояние user-logout.

[Nikita Shchypylov]

Антон Спирин, натурально. Получается, на ховер я показываб кнопку «выйти». Мне же нужно её нажать, так? И как только я начинаю вести к ней мышь, я попадаю в дэд-зону между даумя элементами и так реакт теряет контекст и срабатывает onmouseout

[Антон Спирин]

Nikita Shchypylov, теперь ясно.

Answer 1

[Антон Спирин]

Не стоит полагаться на эти события, они не всегда срабатывают.
В первую очередь надо избавиться от зазора между родительским и дочерним элементом. Меню dropdown по-хорошему должно иметь позицию top: 100%. Для имитации зазора можно использовать контейнер с padding.
А можно что-то вроде:

.user-logout {
  border-top: 5px solid transparent;
  background-clip: padding-box;
}

Путей много на самом деле.

Саму задачу проще решить через css, без лишнего пререндера компонента.

Comments

[Nikita Shchypylov]

Да, что-то не подумал. Спасибо