Question

我有以下代码，但它似乎不起作用：

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

用于在悬停时更改图像的CSS类：

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

请指教。感谢

Answer 1

ImageButton控件呈现为<input type="image" />元素，ImageUrl属性成为src属性，如：

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

因此，您正在为此应用背景图像，当src图像叠加在其上时，您无法看到它。

您有两个选择：

1）更改ImageButton以使用背景图片：

.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库。

Answer 2

我更喜欢这种方式：

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

再见

Answer 3

ImageUrl属性与设置background-image不同。删除CSS并在页面中设置onmouseout和onmouseover属性。

使用asp：imagebutton和CSS在悬停时更改图像？

3 个答案: