Thay đổi hình ảnh khi di chuột bằng asp: imagebutton và CSS?

Question

Tôi có đoạn code sau nhưng nó không có vẻ làm việc:

<td align="center" style="padding-bottom:52.5px"> 
<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server"  ImageUrl="/_layouts/Right_GrayArrow.png"/> 
</td> 

Và một lớp CSS để thay đổi hình ảnh trên di chuột:

.RightArrow:hover 
{ 
background-image: url('/_Layouts/Right_GreenArrow.png') !important; 
} 

Xin cho biết. Cảm ơn

Answer 1

Một ImageButton điều khiển ám như một yếu tố <input type="image" /> với ImageUrl bất động sản trở thành src thuộc tính như:

<input type="image" src="/_layouts/Right_GrayArrow.png" /> 

Vì vậy, bạn đang áp dụng một hình nền này, mà bạn không thể nhìn thấy như hình ảnh src là được phủ lên trên nó.

Bạn có 2 lựa chọn:

---

1) Thay đổi ImageButton sử dụng một hình nền:

.RightArrow 
{ 
    width: /* width of image */ 
    height: /* height of image */ 
    background-image:url('/_layouts/Right_GrayArrow.png'); 
} 
.RightArrow:hover 
{ 
    background-image: url('/_Layouts/Right_GreenArrow.png'); 
} 

Nếu bạn đang sử dụng phương pháp này mặc dù, tôi sẽ khuyên bạn nên sử dụng một số <asp:Button /> thay thế. Có vẻ như vô nghĩa khi sử dụng <asp:ImageButton /> nếu bạn thậm chí không sử dụng thuộc tính src.

---

2) Sử dụng jQuery để thay đổi hình ảnh trên di chuột:

$(".RightArrow").hover(function(){ 
    $(this).attr("src", "/_Layouts/Right_GreenArrow.png"); 
}, 
function(){ 
    $(this).attr("src", "/_Layouts/Right_GrayArrow.png"); 
}); 

Cần lưu ý điều này sẽ chỉ làm việc với javascript được kích hoạt, và bạn phải bao gồm các thư viện jQuery.

Answer 2

Thuộc tính ImageUrl không giống như cài đặt hình nền. Xóa CSS và đặt thuộc tính onmouseout và onmouseover trong trang của bạn.

Answer 3

Tôi thích theo cách này:

<asp:ImageButton CssClass="RightArrow" ID="Image2" runat="server" ImageUrl="/_layouts/Right_GrayArrow.png" onmouseover="this.src='/_layouts/Right_GreenArrow.png'" onmouseout="this.src='/_layouts/Right_GrayArrow.png'"/> 

tạm biệt