我试图在我的imagebutton中创建一个onmouseover效果,类似于下面的css悬停效果代码。
.button:hover
{
background-color: blue;
}
最初我有一个div标签,其中一个类等于css悬停效果,里面是我的imagebutton。当我悬停图像按钮时,背景颜色为蓝色位于图像下方。以下是图片:
从上图中可以看出,当我悬停Ibanez徽标时,它只会在左边,右边和底边创建一条蓝线。所以我决定尝试直接在imagebutton中实现悬停效果,这比普通的css方法要难得多。我在网上看到你应该在代码隐藏中添加onmouseover,因为imagebutton通常没有它,应该放在Page_Load中。
在我的情况下,我不能这样做,因为我的图像按钮位于转发器内部,无法直接访问图像按钮的ID。所以我最终制作了一个OnItemCommand来访问图像按钮。不幸的是,我的解决方案无效,并且我的图像按钮中没有发生悬停。请帮我解决这个问题。
这是aspx:
<%@ Page Title="" Language='C#' MasterPageFile='~/MasterPage.master'
AutoEventWireup='true' CodeFile='GuitarBrands.aspx.cs'
Inherits='Pages_GuitarBrands' %>
<asp:Content ID='Content1' ContentPlaceHolderID='ContentPlaceHolder1'
Runat='Server'>
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="getImageHover">
<ItemTemplate>
<div class="one-third">
<asp:ImageButton ID="brandImage" OnClick="Repeater1_OnClick"
height="250px" width="300px" runat="server" ImageUrl='<%# Eval("image")
%>' CommandArgument='<%# Eval("id") %>'
onmouseover="this.style.backgroundColor='blue';" />
</div>
</ItemTemplate>
</asp:Repeater>
</asp:Content>
这是aspx.cs代码:
public partial class Pages_GuitarBrands : System.Web.UI.Page
{
public List<guitarBrand> brandList { get; set; }
private string brandType = "Guitar";
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
DataSet ds = GetData();
Repeater1.DataSource = ds;
Repeater1.DataBind();
}
}
protected void getImageHover(object sender,RepeaterCommandEventArgs e)
{
ImageButton image = (ImageButton)e.CommandSource;
image.Attributes.Add("onmouseover","this.style.backgroundColor=\"blue\"");
}
private DataSet GetData()
{
string CS = ConfigurationManager.ConnectionStrings["brandsConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(CS))
{
SqlDataAdapter da = new SqlDataAdapter("Select * from guitarBrands", con);
DataSet ds = new DataSet();
da.Fill(ds);
return ds;
}
}
protected void Repeater1_OnClick(object sender, EventArgs e)
{
ImageButton image = (ImageButton)sender;
if (image != null) {
int id = int.Parse(image.CommandArgument);
string brandName = ConnectionClassBrands.GetBrandById(id);
ConnectionClassGuitarItems.guitar = brandName;
Response.Redirect("~/Pages/GuitarItems1.aspx");
}
}
}
答案 0 :(得分:0)
试试这个:
protected void getImageHover(object sender,RepeaterCommandEventArgs e)
{
ImageButton image = (ImageButton)e.CommandSource;
image.Attributes.Add("class","button");
}
在CSS中,使用:
<style>
.button
{
background-color: none;
}
.button:hover
{
background-color: blue;
}
</style>
答案 1 :(得分:0)
在Repeater的OnItemCommand事件中写下面的代码。希望这可能会有所帮助
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
ImageButton img = (ImageButton)e.Item.FindControl("brandImage");
image.Attributes.Add("onmouseover","this.style.backgroundColor=\"blue\"");
}