css - 反应悬停样式

Question

如果以前有人问过这个问题，请原谅我，我已经经历了很多答案，但未能成功。基本上，我只是在将鼠标悬停在我的<p>元素上时添加了背景颜色。我不想使用 JavaScript 悬停事件，我只想使用 CSS 样式。

有人可以解释为什么这不起作用以及常见的解决方案是什么？我尝试了很多组合，例如:hover {. &:hover {, ':hover': {, '&:hover': {等。

谢谢。

import React from "react";
import styled from "styled-components";

const Thing = styled.p`
  background: none;
  width:200px;
  padding:20px;
  text-align: center;
  border: 1px solid white;
  margin: auto;
  ':hover': {
    background: red;
    textDecoration: underline;
  }
`;

export const BorderButton = ({text}) => (
  <Thing>
    {text}
  </Thing>
);

标签： cssreactjsstyled-components

Answer 1

使用:hover不带''（引号）。那是CSS部分，你需要写纯CSS。