Question

我试图在悬停时更改动态Button的图像。

这是我实现它的尝试：

ImageButton

在CSS上，我尝试了几种变体：

ImageButton imageButton = new ImageButton { ImageUrl = "~/images/1.png", CssClass = "changeImage" };

第二次尝试：

imageButton.Attributes.Add("onMouseOver", "this.className='overbutton'"); 

.changeImage { 
     background: Url("~/images/1.png"); 
} 

.overbutton { 
     background: Url("~/images/2.png"); 
}

Answer 1

动态按钮

 ImageButton imageButton = new ImageButton { CssClass = "changeImage" };

添加CSS：

 .changeImage {
        background: Url("images/1.png");
    }

 .changeImage:hover {
        background: Url("images/2.png");
    }

Answer 2

您正在使用ImageButton。图像设置为src，而不是背景。因此，可以使用普通的Button或通过jquery更改图片。

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/1.jpg" CssClass="changeImage" />

<script>
    $(document).ready(function () {
        $('.changeImage').bind('mouseover', function (e) {
            $(this).prop('src', '/2.jpg');
        });
        $('.changeImage').bind('mouseout', function (e) {
            $(this).prop('src', '/1.jpg');
        });
    });
</script>

使用普通按钮

<asp:Button ID="Button1" runat="server" Text="Button" CssClass="changeImage" />

<style>
    .changeImage {
        background-image: url('/1.jpg');
    }

    .changeImage:hover {
        background-image: url('/2.jpg');
    }
</style>

如何在悬停时更改动态ImageButton的图像？

2 个答案: