悬停在样式组件中不起作用，其他样式工作正常答案

【问题标题】：Hover in styled component not working, other styles working fine悬停在样式组件中不起作用，其他样式工作正常
【发布时间】：2021-10-28 07:18:27
【问题描述】：

当我悬停此 Button 组件时，它悬停时不会改变颜色。什么都没发生。当我在 &:hover 之前更改其他样式时，它会更新。我也尝试在 css 中这样做，但仍然没有工作。

import styled from "styled-components";

const Button = styled.button`
  color: black;
  padding: 15px 40px;
  border-radius: 4px;
  font-weight: normal;
  text-transform: uppercase;
  transition: all 0.2s ease-in-out;
  margin: 1rem;
  width: 40%;

  &:hover {
    color: rgba(255, 255, 255, 1);
    box-shadow: 0 5px 15px rgba(145, 92, 182, 0.4);
  }
`;

export default Button;

使用按钮的代码

import Images from "../components/slidingbackground";
import Button from "../components/HomeButton.styled";

const Home = () => {
  return (
    <div className="home-page-container">
      <div className="home-text-container">
        <h1 className="home-text-main">
          Mobile <br /> Vehicle <br /> Verifier
        </h1>
        <div className="white-box">
          <span className="underline">
            <h2 id="verify-text">Verify Your Vehicle</h2>
          </span>
          <h3>With over 30 years of experience in Southern California,</h3>
          <h4>I can inspect any non-salvaged vehicle, dealers welcome.</h4>
          <div className="button-container">
            <Button>Contact Me</Button>
          </div>
        </div>
      </div>
      <Images />
    </div>
  );
};

export default Home;

【问题讨论】：

标签： javascript css styled-components

【解决方案1】：

事实证明它工作正常，但是因为包含按钮的 div 的 z-index 为 -1，所以它没有发光。删除 z-index: -1 在 scss 样式中包含按钮的页面已修复。

【讨论】：