Geek asks and answers

Change image on hover with asp: imagebutton and CSS?

I have the following code, but it does not seem to work:

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

And a CSS class to change the image on hover:

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

Please inform. Thanks

+5
source share
3 answers

The controls are ImageButtondisplayed as an element <input type="image" />, and the property ImageUrlbecomes an attribute src, for example:

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

Therefore, you apply a background image to it, which you cannot see when the image srcoverlays on top of it.

You have 2 options:

1) Change ImageButtonto use background image:

.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');
}

, <asp:Button />. <asp:ImageButton />, src.

2) jQuery :

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

, javascript, jQuery.

+7

:

<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'"/>

+7

The ImageUrl property does not match the background image setting. Remove CSS and set the onmouseout and onmouseover properties on your page.

+1
source

More articles:


All Articles