Brauchen Sie Hilfe für CSS-Probleme

Question

Ich habe Repeater Control wie unten gezeigt.

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

Ich möchte das tun, wenn meine Maus über auf Linkbutton Der Hintergrund von div ‚divleft‘ Hintergrund sollte sollte aus der Hintergrundfarbe grün und Maus sein entfernen bedeutet, weiß .... und wenn ich auf Linkbutton klicken auf dass die Zeit an diesem perticular div Hintergrund sollte grün sein, heißt es ausgewählt werden soll .... was der beste Weg ist dies mir plz tun helfen ....

Answer 1

Sie können diese Stile verwenden:

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

Da Sie gesagt haben, dass Sie den Hintergrund im übergeordneten div anzeigen möchten, habe ich hinzugefügt Höhe und Breite Eigenschaften

Answer 2

CSS:

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

Für Linkbutton, fügen Sie diese 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; 
}); 

[Das funktioniert, wenn Ihr tatsächlicher Aufschlag ist nur, wie Sie zeigten]

EDIT: Hier ist die aktualisierte Lösung (Postbacks Mittel):

ASPX (Add Script, fügen OnClientClick Ereignis auf Linkbutton, fügen OnItemCreated Ereignis auf Repeater, umfassen 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> 

Auf der Server-Seite dieser Methode hinzufügen:

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

es Hoffnung hilft. (Entschuldigung für die Verspätung, ich war Gaming: p)