在悬停时更改按钮的文本

Question

我想从antd的设计中更改按钮上悬停在react按钮上的文本，我想从antd设计中更改按钮上的文本悬停按钮上的文本。

Button
    <div className={ status == "verified" ?  `${styles.btn1} ${styles.btn1Contact}` :  `${styles.btn} ${styles.btnContact}`} >
        <Button className={ status == "verified" ?  `${styles.btnremove}` :  `${styles.btnremove1}`}
        > {status} </Button>
        </div>

我就是这样做的

 &:hover {
   
  }

但是没有什么改变

styles.btn：

.btn {
  display: flex !important;

 
 {
    margin-top: 10px;
  }
  &:hover {
  
    color: $fade-color;
  }
  &:focus {
  
    color: $fade-color;
  }
 
  }
}

styles.btn1：

.btn1 {
 
  @media only screen and (max-width: $max-size-2) {
    margin-top: 10px;
  }

 
  }
}

styles.btn1

.btnremove {
  border: 0px !important;

}

styles.btn：

.btn {


  justify-content: center;
}

Answer 1

以下是解决您的问题的JS解决方案。我们使用的是默认为false的状态。当悬停按钮(触发onMouseEnter)时，我们将其设置为true。当离开按钮(onMouseLeave被触发)时，我们将其设置为false。

这使我们能够拥有一个值isHovering，它包含一个布尔值，即在悬停按钮时为true，而在不悬停该按钮时为false。然后，我们只需要在模板中引用这一点。

当isHovering为true时，将显示-> Hovering。如果没有，将显示-> Not Hovering。

const Example = () => {
  const [isHovering, setHover] = useState(false);

  return (
    <Button
      className={
        status == "verified" ? `${styles.btnremove}` : `${styles.btnremove1}`
      }
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      {isHovering ? `Hovering` : `Not Hovering`}
    </Button>
  );
};

这将是CSS (SCSS)的唯一解决方案。这几乎与JS示例的行为相同。但是在这里，我们呈现两个span元素，并使用CSS显示/隐藏它们，而不是在JS中使用状态。

.btnremove,
.btnremove1 {
  // ... your styles

  .hover-content {
    display: none;
  }

  &:hover {
    .hover-content {
      display: initial;
    }

    .default-content {
      display: none;
    }
  }
}

const Example2 = () => {
  return (
    <Button
      className={
        status == "verified" ? `${styles.btnremove}` : `${styles.btnremove1}`
      }
    >
      <span className="hover-content">Hovering</span>
      <span className="default-content">Not Hovering</span>
    </Button>
  );
};

这两种解决方案都是可以获得的。

Answer 2

用:before (或:after)中的CSS更改内容。悬停只适用于此顺序:hover:before。

​

.btn:before {
  content:'Init value';
}
.btn:hover:before {
  content:'Hover value';
}

 <button class="btn"></button>

​