Question

我有下面的按钮工作，所以按钮做他们必须做的，但我想添加一个CSS，以便他们可以悬停有任何方法这样做。

<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

你需要JavaScript才能做到这一点。在鼠标移动事件中绑定图像按钮，如果鼠标悬停在图像按钮上，则将类似“悬停”的类添加到图像按钮。如果图像按钮包含类，请使用Css进行样式设计。

<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>

注意：如果鼠标没有悬停在图像按钮上，请不要忘记从图像按钮中删除类名。使用你想要的“hover”类的css效果。

asp：imagebutton悬停效果css

1 个答案: