当您将鼠标悬停在它们上方时，两个项目彼此相邻，出现邮件或 phone，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

SCSS:

.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;
}

使用两种状态，phone 号码和电子邮件的特定类名是错误的代码，我认为。我会很高兴有任何帮助！也许有人可以提供更简单和更优化的解决方案。

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;

希望对您有所帮助:)

当您将鼠标悬停在它们上方时，两个项目彼此相邻，出现邮件或 phone，ReactJS

Two items are located next to each other when you hover over them appears mail or phone, ReactJS

html

css

sass

hover

reactjs