2012-04-02 18 views
-1

私は以下のようにRepeater Controlを持っています。Cssの問題のための助けが必要

私は白を意味div要素「divleft」背景の背景のLinkBut​​ton以上に私のマウスは、背景色から緑とマウスであるべき時に削除する必要があることをやりたい
<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をクリックしてくださいそのperticularのdivの背景でその時は緑色にする必要があり、これを行うための最善の方法は何か....それが選択されるべきであることを意味plzは私を助けて....

+0

試しましたか? – PraveenVenu

+0

いいえ、私はそれを試してみませんが、これはリピータコントロールなので、ホバリングして選択していることを恐れています.....私はこれについてはわかりません...私は考えを示すことができます..... –

+0

私は試してみた#divleft:ホバー { 背景色:グリーン; } #divleft:選択 { 背景色:緑; }このホバーではうまく動作していますが、選択されたCSSが動作していません。 –

答えて

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に背景を表示したかったので、高さと幅のプロパティ

+0

こんにちはあなたは確認してくださいできますか? .courseLink:選択されたCSSが動作していません............. –

+0

@KartikPatel ':active'スタイルは、あなたが求めているものを達成していませんか? ChromeとIE9で動作しています。 –

+0

いずれのブラウザでも動作していません...リンクボタンをクリックした後にポストバックが発生する可能性があります。 –

0

CSS:LinkBut​​tonコントロールのために

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

[あなたの実際のマークアップは、あなたが示しただけのようである場合、これは動作します]

EDIT:

012:ここで が更新溶液(ポストバック救済)であります

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)

+0

選択されていませんcss .... –

+0

クリックした後でページにポストバックが発生しているかどうか確認しましたか? – mshsayem

+0

はい、これはポストバックです.....この理由は私には解決策が必要です..... –

関連する問題