Два элемента располагаются рядом друг с другом, когда при наведении на них появляется почта или телефон, ReactJS

Question

Я пытаюсь сделать что-то подобное на моем ReactJS сайте:

Я пытался сделать это сам и получил рабочий результат, но в Реализация моего мнения очень сложна и обременительна. Ниже я разместил код моей реализации.

JS:

import React from "react"

import switchStyles from "./switch.module.scss"

class LinkSwitch extends React.Component {
  constructor() {
    super();
    this.state = {
      isHover: false,
      email: false,
      phone: false
    };
  }
  handleHoverEmail = () => this.setState({ isHover: !this.state.isHover, email: !this.state.email })
  handleHoverPhone = () => this.setState({ isHover: !this.state.isHover, phone: !this.state.phone })
  render() {
    return (
      <div 
        className={`${switchStyles.hoverContainer} ${this.state.email ? switchStyles.activeEmail : ""}${this.state.phone ? switchStyles.activePhone : ""}`}
      >
        <a 
          className={switchStyles.ctaButton}
          onMouseEnter={this.handleHoverEmail}
        >
          почта&nbsp;
        </a>
        <a className={switchStyles.ctaButtonEmail__hover} onMouseLeave={this.handleHoverEmail}>info@adnosov.ru</a>
        <a 
          className={switchStyles.ctaButton}
          onMouseEnter={this.handleHoverPhone}
        >
          &nbsp;телефон
        </a>
        <a className={switchStyles.ctaButtonPhone__hover} onMouseLeave={this.handleHoverPhone}>+7 992 020 1025</a>
      </div>
    )
  }
}

export default LinkSwitch

S CSS:

.hover-container {
    width: fit-content;
}

.hover-container > a:first-child:after {
    content: '/';
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin: 0 0;
    font-weight: 500;
}

.cta-button-email__hover {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    top: 0;
    left: 0;
    z-index: 1;
}

.cta-button-phone__hover {
    display: block;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    white-space: nowrap;
    top: 0;
    left: 0;
    z-index: 1;
}

.active-email .cta-button-email__hover {
    opacity: 1;
    visibility: visible;
}

.active-phone .cta-button-phone__hover {
    opacity: 1;
    visibility: visible;
}

.active-email .cta-button {
    opacity: 0;
}

.active-phone .cta-button {
    opacity: 0;
}

Используя два состояния, указав c classNames для номера телефона и электронной почты, я думаю, плохой код. Буду рад любой помощи! Может быть, кто-то может предложить более простые и оптимальные решения.

Answer 1

@ Andrewnosov Я сделал, как мне кажется, более простой код для реализации вашей версии GIF.

CSS:

h2 {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  background-color: white;
  width: 100%;
  height: 40px;
}

JS:

import React from 'react';
import './App.css';

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isHovered: false,
            showing: 'Email'
        };
    }

    setShowing = showing => {
        this.setState({ isHovered: true, showing });
    };

    render() {
        return (
            <div onMouseLeave={() => this.setState({ ...this.state, isHovered: false })}>
                {this.state.showing === 'Phone' ? <h2>+7 992 020 1025</h2> : null}
                {this.state.showing === 'Email' ? <h2>info@adnosov.ru</h2> : null}
                {!this.state.isHovered ? (
                    <h2>
                        <span onMouseEnter={() => this.setShowing('Phone')}> Phone </span>
                        /
                        <span onMouseEnter={() => this.setShowing('Email')}> Email </span>
                    </h2>
                ) : null}
            </div>
        );
    }
}

export default App;

и надеюсь, что это будет полезно:)