1

在 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 行上时，该行上的 ImageButtons 都会将 image1 交换为 image2。然后，当用户将鼠标悬停在特定的 ImageButton 上时，其图像将从 image2 切换到 image 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>

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

希望这会对其他人有所帮助。

4

1 回答 1

0

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

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

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);
于 2013-02-08T00:59:38.227 回答