反应材料设计图标悬停无法正常工作

Question

我正在使用 mdi-react 图标，但悬停效果不佳。有时有效，有时无效。

import MagnifyPlusOutline from "mdi-react/MagnifyPlusOutlineIcon";
import MagnifyMinusOutline from "mdi-react/MagnifyMinusOutlineIcon";
import DoubleDownChevron from "mdi-react/ChevronDoubleDownIcon";
import DoubleUpChevron from "mdi-react/ChevronDoubleUpIcon";

export default function App() {
  return (
    <div className="App">
      <DoubleUpChevron className="viewIcon" size={38} />
      <DoubleDownChevron className="viewIcon" size={38} />
      <MagnifyPlusOutline className="viewIcon" size={32} />
    </div>
  );
}

CSS

.viewIcon :hover {
  color: grey;
  cursor: pointer;
}

您可以在沙盒上看到，如果您将鼠标悬停有时它会起作用，但有时光标不会变成指针，即使我就在图标上方

沙盒：https://codesandbox.io/s/staging-leftpad-j2tj9?file=/src/App.js

Answer 1

我猜是菜鸟 css 错误，尝试删除 :hover 之前的多余空格

.viewIcon:hover {
  color: grey;
  cursor: pointer;
}