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

Question

在 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 上时，其图像将从图像 2 切换到图像 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>

到目前为止，这运行良好，但我愿意接受更好地处理这个问题的建议。

希望这对其他人有帮助。

Answer 1

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

为了保持一致性，我会稍微调整一下，以便使用 jquery 来实现两种悬停行为，例如将其添加到您现有的脚本中:

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