i am building clone of boat website and i want to show a component on hovering of a button. You could see the original website of boat

this is the button which i will hover and display the content on hovering

  <a href="#" className="link hover-1">
   Shop
     <Arrow />
     </a>

it's in header.js file

import React, { useState } from "react";
import styled from "styled-components";
import { AiOutlineSearch } from "react-icons/ai";
import { MdKeyboardArrowDown } from "react-icons/md";
import ShopHover from "./ShopHover";

function Header() {


  return (
    <Container>
      <Logo>
        
        <img src="./IMAGES/logo.webp" alt="" />
      </Logo>
      <Menu>
      
        <a href="#" className="link hover-1">
           Shop
          <Arrow />
        </a>
        
      
        <a href="#" className="link hover-1">
          Offer Zone
        </a>
        <a href="#" className="link hover-1">
          More <Arrow />
        </a>
      </Menu>

      <RightMenu>
        <form>
          <button type="submit">
            <AiOutlineSearch />
          </button>
          <input type="search" placeholder="Search..."></input>
        </form>
        <SmallLogos>
          <img src="./IMAGES/user.webp"></img>
          <img src="./IMAGES/gift.webp"></img>
          <img src="./IMAGES/cart.webp"></img>
        </SmallLogos>
      </RightMenu>
   
    </Container>
    
  );
}

export default Header;

And i want to display ShopHover.js Component when i hover over that button Below is the ShopHover Component

ShopHover.js

import React from 'react'
import styled from 'styled-components'


function ShopHover(props) {

  return (
  
   <Container opacity={props.op}>
    <img src="./IMAGES/hoverImage/airdopes.webp"></img>
    <img src="./IMAGES/hoverImage/bassheads.webp"></img>
    <img src="./IMAGES/hoverImage/gaming.webp"></img>
    <img src="./IMAGES/hoverImage/home_audio.webp"></img>
    <img src="./IMAGES/hoverImage/limited.webp"></img>
    <img src="./IMAGES/hoverImage/misfit.webp"></img>
    <img src="./IMAGES/hoverImage/rockerz.webp"></img>
    <img src="./IMAGES/hoverImage/stone.webp"></img>
    <img src="./IMAGES/hoverImage/trebel.webp"></img>
    <img src="./IMAGES/hoverImage/watch.webp"></img>
    <img src="./IMAGES/hoverImage/accessories.webp"></img>
   </Container>

  )
}

export default ShopHover

CodePudding user response：

first you should create a state,

const [onHoverContent, setOnHoverContent] = useState(false);
 

after this you can pass a prop onm ouseEnter and onm ouseLeave to your button/anchor-tag to change the state.

<a **onMouseEnter={() => setOnHoverContent(true)} onm ouseLeave={()=> 
     setOnHoverContent(false)}** href="#" className="link hover-1">
      More <Arrow />
 </a>

now you can render your component based on state like:

{onHoverContent === true && <ShopHover />}

CodePudding user response：

first, you need a state so your component renders when the mouse hovers over the button

const [mouseHover , setMouseHover] = useState(false);

then you can use the onMouseEnter and onMouseLeave events in your component

<a onm ouseEnter={() => {setMouseHover(true)}} on MouseLeave={() => {setMouseHover(false)}} // other props
/>

and render your component based on mouseHover

{ mouseHover &&
 <ShopHover />
}