How to make a div that appears when one hovers over the profile picture keep showing when the user also hovers over it

user_16842951 0
Viewed 23

Here is my code in react and css, I am trying to make the div with the class profile_info_iner appear when I hover over the imageContainer div and It appears but when I try to click on the links it keeps disappearing.

<div className="imageContainer">
          <img
            src="http://www.aksisweb.com/theme/fixed/layouts-1/assets/img/avtar-2.png"
            alt=""
          />
          <div className="profile_info_iner">
            <div className="profile_author_name">
              <p>Admin</p>
              <h5>Adugna Tadesse</h5>
            </div>
            <div className="profile_info_details">
              <a href="#">My Profile</a>
              <a href="#">Settings</a>
              <a href="#">Log Out</a>
            </div>
            {/* <p>{NavBarUser}</p>
              <p>Welcome</p> */}
          </div>
</div>

.imageContainer:hover > .profile_info_iner {
  opacity: 1;
  visibility: visible;
  top: 77px;
}
.profile_info_iner {
  position: absolute;
  right: 0;
  background-color: #fff;
  text-align: left;
  width: 215px;
  padding: 0;
  opacity: 0;
  font-family: "Nunito", sans-serif;
  visibility: hidden;
  top: 77px;
  transition: 0.5s;
  border-radius: 15px;
  z-index: 20;
}
.profile_info_iner::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  top: -10px;
  right: 15px;
  border-width: 0 11px 12px;
  border-color: transparent transparent #567aed transparent;
  z-index: 19;
}
reactjs css
1 Answers

you can do something like this

codesandbox: link

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [appear, setAppear] = useState(false);

  return (
    <div className="imageContainer">
      <img
        src="http://www.aksisweb.com/theme/fixed/layouts-1/assets/img/avtar-2.png"
        alt=""
        onMouseEnter={() => setAppear(true)}
      />
      <div className={appear ? "profile_info_iner" : "disappear"}>
        <div className="profile_author_name">
          <p>Admin</p>
          <h5>Adugna Tadesse</h5>
        </div>
        <div className="profile_info_details">
          <a href="#">My Profile</a>
          <a href="#">Settings</a>
          <a href="#">Log Out</a>
        </div>
        {/* <p>{NavBarUser}</p>
        <p>Welcome</p> */}
      </div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.disappear {
  opacity: 0;
  visibility: hidden;
  top: 77px;
}
.profile_info_iner {
  position: absolute;
  right: 0;
  background-color: #fff;
  text-align: left;
  width: 215px;
  padding: 0;
  opacity: 1;
  font-family: "Nunito", sans-serif;
  visibility: visible;
  top: 77px;
  transition: 0.5s;
  border-radius: 15px;
  z-index: 20;
}
.profile_info_iner::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  top: -10px;
  right: 15px;
  border-width: 0 11px 12px;
  border-color: transparent transparent #567aed transparent;
  z-index: 19;
}
user_138646860
Related