Css 反应悬停造型

如果以前有人问过我，请原谅，我已经回答了很多问题，但都没能解决这个问题。基本上，当我将鼠标悬停在

元素上时，我刚刚添加了背景色。我不想使用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>
);

从“React”导入React；
从“样式化组件”导入样式化；
const Thing=styled.p`
背景：无；
宽度：200px；
填充：20px；
文本对齐：居中；
边框：1px纯白；
保证金：自动；
“：悬停”：{
背景：红色；
文本装饰：下划线；
}
`;
导出常量边界按钮=（{text}）=>(
{text}
);

：hover

是正确的访问者/选择器

const Thing = styled.p`
  color: black;
  background: none;
  width: 200px;
  padding: 20px;
  text-align: center;
  border: 1px solid white;
  margin: auto;

  :hover {
    background: red;
    text-decoration: underline; // also use correct css naming!
  }
`;

---

悬停应该像&:hover{…}不是您提到的文本

还请确保（检查模式）此值未在其他globale css样式中被覆盖

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

---

使用

：悬停
而不使用“”（引号）。这是CSS的一部分，您需要编写纯CSS。
事实证明，在呈现此组件的页面上，我有另一个样式。删除该样式似乎已经修复了它，尽管我不明白为什么

<Styles>
    <div className="main">
      <h2>Home Page</h2>
      <BorderButton />
    </div>
  </Styles> 


主页

到


主页
键必须是“&:hover”，如上所述，&:hover也不起作用，有单引号或没有单引号。我认为你不需要
”
周围的
&:hover
@MartinCrawley，这对你有帮助吗？？上面的链接起作用，但当我将样式复制到我自己的代码中时不起作用。我可以看出这是可行的，但它不起作用当我出于某种原因将这个样式复制到我的组件中时。我太困惑了！@MartinCrawley你能把你的代码复制到一个正在运行的沙盒中并重现这个行为吗？
    <div className="main">
      <h2>Home Page</h2>
      <BorderButton />
    </div>