javascript - 如何使用ImageButton在GridView TemplateField中保留图像超链接的样式/悬停功能

在GridView的每一行中（使用TemplateField），我想显示图像按钮，这些按钮将用于控制该行中的数据。然后，当用户首先将鼠标悬停在GridView行上时，然后当用户将鼠标悬停在特定按钮上时，我想交换按钮的图像。

我可以使用CSS和图像超链接轻松完成此悬停功能，但是，使用图像超链接时，我无法引发任何服务器端事件来处理对特定行的编辑。

过去，我使用ImageButtons代替图像超链接。我将CommandName参数添加到ImageButtons中，然后通过代码处理GridView RowCommand：

<asp:ImageButton ID="btnSelect" CommandName="select" runat="server" ImageUrl="~/images/iconSelect1.png" />

为了更改悬停时的ImageButton图像，我使用了Javascript：

<asp:ImageButton ID="btnSelect" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" runat="server" ImageUrl="~/images/iconSelect1.png" />

但是，在这种情况下，当用户第一次将鼠标悬停在GridView行本身上时，我还需要替换ImageButton图像。

总而言之，当用户将鼠标悬停在GridView行上时，该行上的ImageButton将全部将image1交换为image2。然后，当用户将鼠标悬停在特定的ImageButton上时，其图像将从image2切换到图像3。

在此先感谢您对最佳方法的任何建议。

- - - - - - - - - - - - - - - - - - -编辑 - - - - - - -----------------------------

不知道这是否是最好的方法，但是我发现了使用jQuery的潜在解决方案：

<ItemTemplate>
    <div class="gvRow">

        <asp:ImageButton ID="btnSelect" CssClass="btnSelect" runat="server" ImageUrl="~/images/iconSelect1.png" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" />

    </div>
</ItemTemplate>

<script type="text/javascript">
    $('.gvRow').hover(
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect2.png");
        },
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect1.png");
        }
    );
</script>

到目前为止，此方法运行良好，但我愿意接受一些建议以更好地处理此问题。

希望这会对别人有所帮助。

最佳答案

您的解决方案看起来不错！

为了保持一致，我会对其进行一些微调，以便使用jquery来实现两种悬停行为，例如通过将其添加到您现有的脚本中：

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);