html - CSS悬停在span问题上

Question

我正在使用 ASP .NET Web 表单，其中显示某些 <asp:Label .. />中继器内的控件。

我尝试用 fiddle 复制我的问题:http://jsfiddle.net/abhighosh18/0sd99jnk/3/

(请注意，在 fiddle 中我没有保留任何 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 悬停时 fa 类出现。我真的希望它们出现在单个 Label 的悬停上控制。

渲染后我的 DOM 如下所示:

我尝试的是:

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

但不幸的是这不起作用。

有什么想法吗？

Answer 1

也许是这样的？ 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();
        });
    }
});