onmouseover 效果在 asp.net imagebutton 中不起作用答案

【问题标题】：onmouseover effect not working in asp.net imagebuttononmouseover 效果在 asp.net imagebutton 中不起作用
【发布时间】：2017-06-20 16:46:12
【问题描述】：

我试图在我的 imagebutton 中创建一个鼠标悬停效果，类似于下面的这个 css 悬停效果代码。

.button:hover
{
  background-color: blue;
}

最初我有一个 div 标签，其类等于 css 悬停效果，里面是我的图像按钮。当我将图像按钮悬停时，背景色蓝色位于图像下方。这是下图：

从上图可以看出，当我将 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");
    }
}


}

【问题讨论】：

你为什么使用 JavaScript 来应用样式而不是 CSS 类和 hover pseudo class？
Fyi..im 确实是这方面的初学者，因此非常感谢您提供解决方案
我在网上搜索过答案，但没有。我想知道是否有人可以解决这个问题。

标签： c# html css asp.net

【解决方案1】：

试试这个：

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>

【讨论】：

【解决方案2】：

在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\"");
}

【讨论】：