Question

我有Repeater Control，如下所示。

<asp:Repeater ID="rptCategory" runat="server">
    <HeaderTemplate>
       <h2 class="art-logo-text" style="margin-bottom: 5px; color: #008752!important;font-size:16pt;">
            Course Categories</h2>
    </HeaderTemplate>
    <ItemTemplate>
        <table cellpadding="2px" cellspacing="2px" style="margin-left:0px">
            <tr>
                <td>
                   <div  id="divleft">
                        <asp:LinkButton ID="lnkCategory" runat="server" Text='<%# Eval("CategoryDescription")%>'
                            CommandArgument='<%# Eval("CourseLibraryCategoryID") %>' OnClick="lnkCategory_Click"
                            CssClass="courseLink">
                        </asp:LinkButton>

                    </div>

                </td>
            </tr>
        </table>
    </ItemTemplate>
    <FooterTemplate>
    </FooterTemplate>
</asp:Repeater>

当我的鼠标悬停在linkbutton上时，我想这样做.div'degleft'背景的背景应该是绿色的，鼠标背景颜色应该删除意味着白色....当我点击链接按钮时那个特殊的div背景应该是绿色意味着它应该被选中....最好的方法是做什么这个PLZ帮助我....

Answer 1

您可以使用以下样式：

<style type="text/css">
    .courseLink
    {
        display:block;
        height:100%;
        width:100%;
        background-color:Green;
    }
    .courseLink:hover
    {
        background:none;
    }
    .courseLink:active
    {
        background-color:Green;
    }
</style>

既然你说它希望它在父div中显示背景，我已经添加了高度和宽度属性

Answer 2

CSS：

#divleft:hover, .selected
{
   background-color:green;
}

对于linkbutton，添加此javascript（jQuery）：

$('#<%# lnkCategory.ClientID %>').click(function(){
   // First remove all other rows which was selected before 
   // and you dont want those to remain selected if another 
   // row is selected. Otherwise, remove the following line
   $("#divleft").removeClass("selected");
   $(this).closest('div').addClass("selected");
   return false;
});

[如果您的实际加价与展示一样，这将有效]

修改这是更新的解决方案（回发补救措施）：

ASPX（添加脚本管理器，在linkbutton上添加OnClientClick事件，在转发器上添加OnItemCreated事件，包括jquery）：

<script type="text/javascript"> function highlight(lb) { $(".divleft").removeClass("selected"); $(lb).closest('div').addClass('selected'); } </script> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Repeater ID="rptCategory" runat="server" OnItemCreated="rptCategory_ItemCreated"> <HeaderTemplate> <h2 class="art-logo-text" style="margin-bottom: 5px; color: #008752!important; font-size: 16pt;"> Course Categories</h2> </HeaderTemplate> <ItemTemplate> <table cellpadding="2px" cellspacing="2px" style="margin-left: 0px"> <tr> <td> <div class="divleft"> <asp:LinkButton ID="lnkCategory" ClientIDMode="Predictable" runat="server" Text='<%# Eval("CategoryDescription")%>' CommandArgument='<%# Eval("CourseLibraryCategoryID") %>' OnClientClick="highlight(this)" OnClick="lnkCategory_Click" CssClass="courseLink"> </asp:LinkButton> </div> </td> </tr> </table> </ItemTemplate> <FooterTemplate> </FooterTemplate> </asp:Repeater>

在服务器端添加此方法：

protected void rptCategory_ItemCreated(object sender, RepeaterItemEventArgs e) { if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) { ScriptManager1.RegisterAsyncPostBackControl(e.Item.FindControl("lnkCategory")); } }

希望它有所帮助。（抱歉迟到了，我正在游戏：p）

需要帮助解决Css问题

2 个答案: