html - When hover change text issue -


I am trying to create it so that when you hover your mouse over the "box", however, the checkmark / errormark And after that follow or unfollow a line breaks. Why?

HTML:

  & lt; A class = "FPP" href = "demo.html" & gt; & Lt; Span class = "addfri2" & gt; & Lt; Span class = "fr1" & gt; & Lt; Font color = "# 33FF00" & gt; & Amp; # X2713; & Lt; / Font & gt; Following & lt; / Span & gt; & Lt; Span class = "fr2" & gt; & Lt; Font color = "# FF 20000" & gt; & Amp; # X2717 & lt; / Font & gt; Unfollow & lt; / Span & gt; & Lt; / Span & gt; & Lt; / A & gt;   

CSS:

  .addfriend2 {boundary-radius: 15px; Background: # 517eca; Padding: 8px; Margin-left: 30px; Text align: center; Font-size: 14px; } A.afp {text-decoration: none; Color: # 000000; } A.afp: Visited {text-decoration: none; Color: # 000000; } A.afp: Active {text-decoration: none; Color: # 000000; } Span.fr2 {display: none; } A.afp: hover span.fr1 {display: none; } A.afp: hover span.fr2 {display: inline; }    

Unexpectedly fix the problem when adding missing semi-colon before unfollowing

Comments