CSS наведите курсор на проблемы с диапазоном

Question

Я использую веб-форму ASP .NET, где я отображаю некоторые элементы управления <asp:Label .. /> внутри репитера.

Я попытался повторить мою проблему в скрипкой:. http://jsfiddle.net/abhighosh18/0sd99jnk/3/

(Примечание в скрипке я не держал никаких элементов управления ASP я попытался повторить мою проблему с помощью HTML-элементов управления, которые появляются после того, как элементы управления ASP являются услуги)

То, что я хочу на :hover этикеток, то fa fa-times знак должен появиться, и я должен быть в состоянии удалить этот ярлык на щелчке его из DOM и самой БД.

Я могу обработать бэкэнд, но моей первой проблемой является позиционирование CSS символа fa fa-times.

В настоящее время мой 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 появляется класс фа , Я действительно хочу, чтобы они появлялись при наведении одного элемента управления Label.

Мой DOM после рендеринга выглядит так:

То, что я попытался было:

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

Но это не работает, к сожалению.

Любые идеи?

Answer 1

Что-то вроде этого, возможно? http://jsfiddle.net/web_nfo/0sd99jnk/7/

Если вы переместите кнопку «Удалить» в «контейнер» с кнопками, вам будет легче получить окончательный идентификатор.

Кнопка Затем контейнер выглядит примерно так:

<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