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>

这样做是在 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();
        });
    }
});

Answer 2

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

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

看到这个小提琴