我有一个带有背景图像div，在div中我有一个名为Hero的组件。我想在一个带有className newBigButton的div上应用一个简单的悬停效果，但是过渡是如此滞后，但是当我删除背景图像时，过渡工作正常。.下面是代码：

<div
        className="hero-section"
        style={{
          flex: 1,
          display: "flex",
          backgroundImage: bg ? `url(${bg})` : "",
          backgroundPosition: " 60% center",
        }}
      >
        <Hero />
      </div>

字符串
Hero组件代码的一部分：

<div style={{marginTop: "15vh"}} className="d-flex w-100 flex-column justify-content-center align-items-center">
    <div style={{gap: "20vh"}} className="d-flex ">
      <div className={styles.newBigButton}>BESOIN IMMÉDIAT</div>

      <div className={styles.newBigButton}>PROJET À VENIR</div>
    </div>

    <div style={{marginTop: "8vh"}} className={styles.newBlueButton}>Demander une démo</div>
  </div>

型
CSS：

.newBigButton {
  color: #2863a9;
  background-color: #fff;
  border-radius: 10px;
  border: 2px solid #2863a9;
  padding: 3.5vh 2vh;
  font-weight: 800;
  cursor: pointer;
  transition: 0.1s linear;
}

.newBigButton:hover{
  transition: 0.1s linear;
  background-color: #2863a9;
  color: #fff;
}

型