I'm trying to add hover effect to a span element as shown below.

• Hover effect doesn't work when added inside style prop.
• But, If it is written in separate css file it will work

I just want to know, Why it is So?

https://codesandbox.io/s/happy-resonance-stqbf9?file=/src/App.js

App.js

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <span
        style={{
          fontSize: "4em",
          color: "blue",
          "&:hover": {
            color: "green"
          }
        }}
      >
        Element
      </span>
      <div></div>
      <span className="ele">Element 2</span>
    </div>
  );
}

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.ele {
  font-size: 4em;
  color: blue;
}

.ele:hover {
  font-size: 6em;
  color: green;
}