CSS - 当页面宽度较小时，onhover 垂直下拉 div

Question

我在一个网站上工作，该网站在页面中央的徽标旁边有一个信息图标。 将鼠标悬停在信息图标上时，会显示一个文本框。 出于某种原因，当屏幕宽度小于 1300px 左右时，整个徽标以及信息框会被垂直下拉。 不确定悬停的哪个方面可能导致此问题。

我尝试使用媒体查询手动下移信息图标，但这不是一个好方法。

这是反应组件：

function HomeContent() {
  return (
    <>
      <div className="center-div">
        <img src={tenGreenLogo} className="ten-green-logo" alt=""></img>
        <div className="info-div">
          <img src={infoIcon} alt="" className="info-icon"></img>
          <p className="hidden-info">
            The 10Green Score indicates the health of your environment using a
            number from 0 to 10. The higher the score, the healthier your
            environment.
            <br></br>
            <br></br>
            Factors that can reduce your score include unhealthy air quality
            readings and poor environmental monitoring.
          </p>
        </div>
      </div>
      <Globe />
    </>
  );
}

export default HomeContent;

这是该组件的 CSS：

.center-div {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 7rem;
  padding-bottom: 0rem;
  scroll-behavior: smooth;
}
.ten-green-logo {
  max-width: 40%;
  animation: transitionIn 1s;
  padding-right: 1rem;
}

.info-div {
  width: 2rem;
  margin-top: auto;
  margin-bottom: 0;
}

.info-icon {
  width: 2rem;
  animation: transitionIn 1s;
}

.hidden-info {
  display: none;
}

.info-icon:hover + .hidden-info {
  display: block;
  position: relative;
  background-color: white;
  padding: 0.6rem;
  border-radius: 5%;
  width: 20rem;
  font-size: 80%;
  right: 7.5rem;
  top: 10.5rem;
}

.info-icon:hover {
  position: relative;
  top: 10.6rem;
}

@keyframes transitionRight {
  from {
    transform: translateX(0rem);
  }
  to {
    transform: translateX(2rem);
  }
}

@keyframes transitionIn {
  from {
    opacity: 0;
    transform: translateY(4rem);
  }
  to {
    opacity: 1;
    transform: translateY(0rem);
  }
}

任何帮助将不胜感激。

Answer 1

使用这种风格，你必须在隐藏信息上使用 position absolute

 .info-div { position: relative; }.hidden-info { display: none; position: absolute; background-color: white; padding: 0.6rem; border-radius: 5%; width: 20rem; font-size: 80%; right: 7.5rem; top: 10.5rem; }.info-icon:hover +.hidden-info { display: block; }