Блог

Когда я навожу курсор на этот компонент кнопки, он не меняет цвет при наведении. Ничего не происходит. Когда я изменяю другой стиль перед наведениемamp;:, он обновляется. Я попытался сделать это и в 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%;

  amp;: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;
 

Оказалось, что он работал нормально, но поскольку div, содержащий кнопку, имел z-индекс -1, он не светился. Удаление z-индекса: -1 в стиле scss на странице, содержащей кнопку, исправило это.