需要幫助的Css問題

Question

我有Repeater控制如下所示。

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

我想做的事情，當我的鼠標移到LinkBut​​ton的div的背景「divleft的背景應該是綠色和鼠標了背景顏色應該刪除意味着白色....當我點擊的LinkBut​​ton在那個時候在那個perticular 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; 
} 

對於LinkBut​​ton的，加入這個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（添加一個ScriptManager，對LinkBut​​ton的加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）