反应悬停样式

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>
);

Answer 1

使用不带“（引号）的:hover”。那是CSS的一部分，您需要编写Pure CSS。

Answer 2

: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!
  }
`;

Answer 3

悬停应类似于＆：hover {...}，而不是您提到的文本，

还要确保（检查模式）该值不会在其他全局CSS样式中被覆盖

article{
   position: relative
}

.side-panel{
   position: absolute;
   width: 20%;
   left: 20%;
}

Answer 4

事实证明，我在呈现此组件的页面上还有另一种样式。删除该样式似乎可以解决问题，尽管我不明白为什么。

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

到

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