Css问题需要帮助

本文关键字：帮助 问题 Css | 更新日期: 2023-09-27 18:29:40

我有中继器控制，如下所示。

<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>

当我把鼠标移到链接按钮上时，我想这样做。div"divleft"背景的背景应该是绿色的，把鼠标移出去，背景颜色应该去掉，这意味着白色。。。。当我当时点击链接按钮时，特定的div背景应该是绿色，这意味着它应该被选中。。。。做这件事最好的方法是什么plz帮助我…

Css问题需要帮助

您可以使用以下样式：

<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中显示背景，因此我添加了Height和Width属性

CSS:

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

对于链接按钮，添加以下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（添加脚本管理器，在链接按钮上添加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）

相关文章：