CSS悬停在跨度问题上

Question

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

我试图在小提琴中复制我的问题：http://jsfiddle.net/abhighosh18/0sd99jnk/3/

（请注意，我没有保留任何 asp 控件。我尝试使用呈现 ASP 控件后出现的 HTML 控件来复制我的问题）

我想要的是在标签的:hover 上，fa fa-times 标志应该出现，并且我应该能够在单击它时从 DOM 和 DB 本身中删除该标签。

我可以处理后端，但我的第一个问题是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（在 MASTER PAGE 中）是：

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

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

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

这样做是在 fa 类出现的 div 上悬停。我真的希望它们出现在单个 Label 控件的悬停上。

渲染后的 DOM 如下所示：

我尝试的是：

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

但不幸的是，这不起作用。

有什么想法吗？

Answer 1

您需要添加一个包装元素以启用标签和十字图标的悬停状态，

<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

Answer 2

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