css - 如何在鼠标悬停时调用c#按钮

Question

我正在开发购物车应用程序，我在其中列出了 ListView 中的所有产品。然后在单击每个产品的按钮时，图像 slider 会发生变化。现在我想在鼠标悬停而不是单击时进行。下面是我试图实现的代码。

ASP

 <div class="col-md-12 ">
                <div class="col-md-4 single_left pull-left">
                    <div class="flexslider">
                        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                            <ContentTemplate>
                                <asp:Repeater runat="server" ID="Repeater">
                                    <HeaderTemplate>
                                        <ul class="slides">
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <li data-thumb='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>'>
                                            <asp:Image ID="image5" runat="server"
                                                ImageUrl='<%# "assets/products/"+DataBinder.Eval(Container.DataItem, "Image1") %>' />
                                        </li>
                                    </ItemTemplate>
                                    <FooterTemplate>
                                        </ul>
                                    </FooterTemplate>
                                </asp:Repeater>
                            </ContentTemplate>
                        </asp:UpdatePanel>
                    </div>
                    <script defer src="assets/js/jquery.flexslider.js"></script>
                    <link rel="stylesheet" href="assets/css/flexslider.css" type="text/css" media="screen" />
                    <!-- FlexSlider -->
                    <div class="caption">
                        <strong>
                            <asp:Label ID="lblPrice" runat="server" Text="*"></asp:Label></strong>
                        <strong>
                            <asp:Label ID="ItemCode" runat="server" Text="*"></asp:Label></strong>
                        <p>
                            <small><strong>
                                <asp:Label ID="lblDesc" runat="server" Text="*"></asp:Label>
                            </strong></small>
                            <br />
                            <asp:Label ID="lblID" Style="display: none;" runat="server" Text='<%# Eval("ID")  %>'></asp:Label>
                            <small>
                                <asp:Label ID="lblMsg" runat="server" Text="*" ForeColor="#990000"></asp:Label>
                            </small>
                            <br />
                        </p>
                        <asp:TextBox ID="txtqty" type="number" class="form-control" Text="0" runat="server"></asp:TextBox>
                    </div>
                    <asp:LinkButton ID="btnSubmit" type="submit" CssClass="add-cart item_add" runat="server" OnClick="btnSubmit_Click"><i class="fa fa-save"></i> Add to Cart</asp:LinkButton>
                    <script>
                        // Can also be used with $(document).ready()
                        $(window).load(function () {
                            $('.flexslider').flexslider({
                                animation: "slide",
                                controlNav: "thumbnails"
                            });
                        });
                    </script>
                </div>
                <div class="col-md-8 single-top-in simpleCart_shelfItem">
                    <asp:ListView ID="ImagesList" runat="server"
                        DataKeyNames="ID"
                        GroupItemCount="15"
                        OnPagePropertiesChanging="ImagesList_PagePropertiesChanging" OnSelectedIndexChanged="OnSelectedIndexChanged">
                        <EmptyDataTemplate>
                            No Images found.
                        </EmptyDataTemplate>
                        <LayoutTemplate>
                            <table>
                                <tr runat="server" id="groupPlaceholder" />
                            </table>
                        </LayoutTemplate>
                        <GroupTemplate>
                            <tr>
                                <td runat="server" id="itemPlaceholder" />
                            </tr>
                        </GroupTemplate>
                        <ItemTemplate>
                            <td>
                                <asp:LinkButton ID="LBtn" runat="server"
                                    CommandName="Change"
                                    OnCommand="btnDetails_Command"
                                    CommandArgument='<%# Eval("Notes") %>'>
                                   <img src='<%#"assets/products/"+Eval("ImageUrl").ToString() %>' class="image" style="Width:50px;Height:50px" alt="Change" onmouseover="this.OnCommand"  />
                                </asp:LinkButton>
                            </td>
                        </ItemTemplate>
                    </asp:ListView>
                </div>
                <div class="clearfix"></div>
                <!---->
            </div>

Answer 1

我必须说，您的鼠标悬停触发点击的方法似乎不是正确的解决方案。 (只是说)

无论如何 - 将您的代码更改为:

<asp:LinkButton ... CssClass="myButton"
  ...                   
</asp:LinkButton>

然后，通过 jQuery(您已经在使用):

$(function (){
    $(".myButton").on('mouseover',function (){this.click()});
});