CSS懸停在跨度問題

我正在使用ASP .NET Web窗體，其中我在中繼器中顯示某些<asp:Label .. />控件。CSS懸停在跨度問題

我試圖複製在撥弄我的問題：http://jsfiddle.net/abhighosh18/0sd99jnk/3/

（請注意，在撥弄我沒有遵守任何ASP控制我曾嘗試使用後纔出現ASP控件是HTML控件來複制我的問題呈現）

我想要的是:hover的標籤，fa fa-times標誌應該出現，我應該能夠從DOM和數據庫本身點擊它時刪除該標籤。

我可以處理後端，但我的第一個問題是fa fa-times符號的CSS定位。

目前我的ASPX代碼如下所示：

<div class="box-body compDiv"> 
     <asp:Repeater ID="rptr" runat="server"> 
      <ItemTemplate> 
       <asp:HiddenField ID="hfCoID" runat="server" Value='<%# Eval("CompID") %>' /> 
       <asp:Label ID='CompanyID' runat="server" CssClass="btn-sm btn-success compName" Text='<%# Eval("CompName") %>' /> 
       <asp:LinkButton runat="server" ID="lnkBtnRemove" CssClass="btnRemove" OnClientClick="return confirm('Are you sure you want to remove this company ?');"><i class="fa fa-times"></i></asp:LinkButton> 
      </ItemTemplate> 
      </asp:Repeater> 
    </div>

而我的CSS（在母版頁）是：

<style type="text/css"> 
     a.btnRemove { 
      display: none; 
     } 

     div.compDiv:hover a.btnRemove { 
      display: block; 
      position: relative; 
     } 

     div.compDiv a.btnRemove { 
      top: 0; 
     } 
    </style>

這樣做是對的DIV足協類出現懸停。我真的希望他們出現在一個單一的Label控制懸停。

我的渲染看起來像這樣經過DOM：

我想什麼：

span.compName:hover a.btnRemove{ 
     display: block; 
     position: relative; 
}

但是，這並不遺憾的是工作。

任何想法？

來源

2015-08-28 Abhishek Ghosh

哪裏ü要在按鈕，顯示「X」上徘徊？ –

除了標籤的名稱。由於標籤是動態生成的，因此標籤的長度可能會有所不同。「x」應該只出現在懸停的標籤的右側 –

檢查http://jsfiddle.net/abhighosh18/0sd99jnk/3/ 對於個人懸停，使用jquery你可以很容易地實現它，因爲你有動態元素。讓我知道如果你需要任何進一步的幫助 –

也許這樣的事情？ http://jsfiddle.net/web_nfo/0sd99jnk/7/

如果您將刪除按鈕移動到按鈕「容器」中，獲取最終的ID會更容易一些。

按鈕容器然後看起來是這樣的：

<div id='CompanyID_0' runat="server" class="compName"> 
    <span class="btn btn-sm btn-success">ABC1</span> 
    <a href="#" ID="lnkBtnRemove" class="btnRemove"><i class="fa fa-times"></i></a> 
</div>

而且（jQuery的）JavaScript的（我猜你需要某種Ajax請求的，如果您想直接從DOM中刪除的按鈕，你可以在這裏使用id）。

$('.btnRemove').on('click', function(){ 
    var $button = $(this).parent(); 
    var id = $button.attr('id'); 

    var result = confirm('Are you sure you want to remove this company ?'); 
    if(result) { 
     // You can use the var 'id' to get "CompanyID_0" for example 

     $button.animate({ 
      'opacity': 0, 
      'height': 0 
     }, 500, function(){ 
      $button.remove(); 
     }); 
    } 
});

來源

2015-08-28 11:47:44 Develop123

按鈕「容器」是什麼意思？ –

「容器」是指第一個div（CompanyID_0）。 span（按鈕）和a（刪除按鈕）都位於「容器」內部，因爲它們屬於彼此。通過使用jQuery執行$（this）.parent（），單擊十字架時獲取容器的id會更容易一些。 – Develop123

所以你的意思是我應該刪除隱藏的領域吧？ –

你需要添加一個包裹元素以啓用標籤和交叉圖標都懸停狀態，

<div class="mywrapper"> 
    <span ID='CompanyID' runat="server" class="btn btn-sm btn-success compName"> ABC </span> 
    <a href="#" ID="lnkBtnRemove" class="btnRemove"><i class="fa fa-times"></i></a> 
</div>

的圖標就會穿上因爲display:block新線，當我們將其更改爲display:inline-block時，它將被追加到當前行。

.mywrapper:hover > a { 
    display :inline-block; 
    position : relative; 
}

同樣適用於包裝元素

div.mywrapper { 
    margin : 15px; 
    display:inline-block; 
}

看到這個fiddle

來源

2015-08-28 11:53:36 Lars

請給我一個小提琴的鏈接？所以我可以告訴它是否有效！ –

因爲我添加一個包裝div，它完全破壞了CSS –

CSS懸停在跨度問題

回答

相關問題