Question

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

我试图用小提琴复制我的问题：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（在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

也许这样的事情？ 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; 
}

请参阅此fiddle

CSS悬停在跨度问题上

2 个答案: