react 组件顶部悬停tophover

app.js

import React from 'react';
import "../src/component/top_hover.css";
import "./App.css";
import Top_hover from "./component/top_hover";
class App extends React.Component {
  render() {
    return (
      <div className='App'>
        <Top_hover></Top_hover>
      </div>
    )
  }
}
export default App;

top_hover.jsx

import React from 'react';
import icon from "../component/icon/国旗.webp"
import icon1 from "../component/icon/勿忘国耻.webp"
import icon2 from "../component/icon/国旗杆.webp"
import icon3 from "../component/icon/壁纸.jpg"
export default function ZhiDing() {
  return (
    <div>
      <div style={{ position: 'fixed', top: '0', width: '100%' }}>
        < img src={icon} alt="" style={{ width: '500px', height: 'auto'}} />

      </div>
      < img src={icon1} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon2} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon3} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon1} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon2} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon3} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
      < img src={icon1} alt="" style={{ width: '500px', height: 'auto' }} /><br/>
    
    </div>
  )}