FontAwesome 5反应，悬停时可见图标

Question

我已经在这里阅读了一些答案，但我仍然不确定它是不是一个5个svg字体问题还是一个响应。该图标可见，但是当我将其隐藏并悬停在该图标上时，该图标不会再次弹出。

import React from 'react';

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import './Controls.css';

const controls=(props)=>(
  <div className="controls">
    <FontAwesomeIcon icon= "play" size="6x" className="iconn"/>
  </div>


);

export default controls;

这是我的CSS ...

.controls .iconn{
  position:relative;
  color: #fff;
  top:2.2rem;
  left:3.0rem;
  display: none;


}

.controls:hover .iconn{
  left: 3.6rem;
  display:block


}

如果有人有任何解决方案，请帮帮我