html - Hover over text issue, class properties do not apply to a span in a tag -

I'm trying to create a pure CSS hover effect on the block of text. This is html .. < P> & lt; P class = "background-switch" & gt; OK, & lt; Span style = "color: red;" & Gt; Now he & lt; / Span & gt;

and css ..

 . Background-switch {text-align: center; Padding: 1am; Max-width: 250px; Font-size: 2.2m; Boundary-radius: 30px; Background color: pink; }. Background-switch: hover {background color: light blue; White color ; }   
 This  & lt; Span & gt;  without  & lt; P & gt;  works fine without tags ... but I need this "now" color can be red before it rotates, and white when roaming. This is not the case, like red refuses to turn white. Whether  & lt; Span & gt; Is there any way to apply the property of the square even at ?   
 
 
 Because you have:  
  & lt; Span style = "color: red," & gt;   
 Which is a  inline style , it is not becoming more pronounced.  
 The best way to fix this is to  inline style  in CSS  
 . Background-switch span {color: red;} Background-switch: hover span {color: #fff;}   
 or if you want to keep  inline style , then  important < / Code>, so the rule will override the  inline  rule.