Changing LinkButton Content on hover

Question

i'm trying to change the a linkbutton content so when the mouse is over it, it will change it's content to "Sign Out".

the content before is:

   <asp:LinkButton  ID="Logged" runat="server" class="Connected"  OnClick="Logged_Click">Hello <asp:Label ID="name" runat="server" Text="name"></asp:Label></asp:LinkButton>

after: suppose to be:

   <asp:LinkButton  ID="Logged" runat="server" class="Connected"  OnClick="Logged_Click">Log Out </asp:LinkButton>

i've uploaded my code to fiddle and it seems to be working but it doesn't show the label in the link button when not hovering. also, it works on fiddle but not on my computer.

the way the Login/basket and Register/Hello(#Logged) works is that the user logs into the website and then the linkbuttons "login" and "register" dissapear and it shows the linkbuttons "basket" and " hello + Label(contains User's FirstName)"

on my computer,it doesn't change hello(#Logged) LinkButton to "Sign Out" .

what can i do to fix it?

Answer 1

I don;t know much about asp - but you can achieve this with CSS only

 #button:before{ content:'Hello'} #button:hover:before{ content:'Sign Out'} 

 <button id="button" type="button"></button> 

Answer 2

 <style> a.content::after{content:'Hello'} a.content:hover::after{content:'Sign Out'} </style> <a class="content"></a>