asp:imagebutton hover effect css - asp.net

Question

I have the buttons below working so that the buttond do what they have to, but i would like to add a CSS so that they can hover is there any method of doing this.
<asp:GridView ID="GridView1" runat="server" AllowPaging="True" DataKeyNames="pageID"
DataSourceID="SQLData" AutoGenerateColumns="False"
PageSize="1" Width="100%" Height="500px"
GridLines="None" ShowHeader="False" >
<Columns>
<asp:BoundField DataField="pageID" HeaderText="pageID" InsertVisible="False"
ReadOnly="True" SortExpression="pageID" ShowHeader="False" Visible="False" />
<asp:BoundField DataField="sectionID" HeaderText="sectionID"
SortExpression="sectionID" Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageNo" HeaderText="pageNo" SortExpression="pageNo"
Visible="False" ShowHeader="False" />
<asp:BoundField DataField="pageTitle" HeaderText="pageTitle"
SortExpression="pageTitle" Visible="False" ShowHeader="False" />
<asp:TemplateField HeaderText="pageContent" SortExpression="pageContent"
ShowHeader="False" ItemStyle-CssClass="pagecontent">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("pageContent") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblPageContent" runat="server" Text='<%# Bind("pageContent") %>' CssClass="pageContent"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerSettings Mode="NextPrevious"
NextPageImageUrl="~/images/navButtonNext.png" NextPageText="Next Page"
PreviousPageImageUrl="~/images/navButtonPrevious.png" PreviousPageText="Previous Page" LastPageImageUrl="images/navButtonNext.png" />
<PagerStyle CssClass="navPager" HorizontalAlign="Right" />
<PagerTemplate>
<asp:ImageButton ID="navBack" runat="server"
ImageUrl="~/images/navigation/grey_bttn_back.jpg" CssClass="sec" CommandName="Page" CommandArgument="Prev" ClientIDMode="Static" AlternateText="Back" ToolTip="Back" />
<asp:ImageButton ID="navHome" runat="server"
ImageUrl="~/images/navigation/grey_bttn_up.jpg" CommandName="gotoHome" ClientIDMode="Static" AlternateText="Home" ToolTip="Home" />
<asp:ImageButton ID="navFwd" runat="server"
ImageUrl="~/images/navigation/grey_bttn_fwd.jpg" CommandName="Page" CommandArgument="Next" ClientIDMode="Static" AlternateText="Fwd" ToolTip="Fwd" />
</PagerTemplate>
</asp:GridView>

Answer 1

You need JavaScript to do this. Bind your image buttons in mouse move event and add a class something like "hover" to the image button if mouse is hovered on it. Use your Css to style if the image button contains class.
<script type="text/javascript">
window.onload=function(){
document.getElementById("navBack").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navHome").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navBack").className="";
document.getElementById("navFwd").className="";
}
document.getElementById("navFwd").onmousemove=function(){
this.setAttribute('class', 'hover');
document.getElementById("navHome").className="";
document.getElementById("navBack").className="";
}
}
</script>
Note: Don't forget to remove class name from image buttons if mouse is not hovered on them. Use css effects you want for the class "hover".