CSS hover on span problems

Question

I am using an ASP .NET web form, where in I display certain <asp:Label .. /> controls inside a repeater.

I have tried to replicate my problem in a fiddle : http://jsfiddle.net/abhighosh18/0sd99jnk/3/

(Note in the fiddle I have not kept any asp controls. I have tried to replicate my problem using HTML controls that appear after ASP controls are rendered)

What I want is on :hover of the label, the fa fa-times sign should appear and I should be able to remove that label on the click of it from the DOM and the DB itself.

I can handle the backend, but my first problem is the CSS positioning of the fa fa-times symbol.

Currently my ASPX code looks like this :

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

And my CSS(in MASTER PAGE) is :

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

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

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

What this does is on the hover of the div the fa class appear. I really want them to appear on hover of a single Label control.

My DOM after rendering looks like this :

What I tried was :

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

But this doesn't work unfortunately.

Any ideas ?

Besides the name of the label. And as the Label is generated dynamically , the length of the label can vary.. The `x` should appear only on the right side of the label which was hovered — Abhishek Ghosh, Aug 28 '15 at 11:18
Check this http://jsfiddle.net/abhighosh18/0sd99jnk/3/ For individual hover, use jquery u can easily achieve it as you have dynamic element . Let me know if you requires any further help — Kaushik Thanki, Aug 28 '15 at 11:26
This is my fiddle only..!! what did you do ? This doesn't solve my problem — Abhishek Ghosh, Aug 28 '15 at 11:28
Not completely sure what you're asking, This might do: [fiddle](http://jsfiddle.net/0sd99jnk/5/), I've set `display:inline block` on the cross icon and wrapped both elements — Lars, Aug 28 '15 at 11:34
@KaushikThanki : you did not save it.. Save it and update the link — Abhishek Ghosh, Aug 28 '15 at 11:36
@Lars : Yes this is what I want! But currently they appear as a list.What if they are aligned horizontally ? — Abhishek Ghosh, Aug 28 '15 at 11:38
like [fiddle](http://jsfiddle.net/0sd99jnk/6/)? You might want add some padding on the hoovered state, [fiddle](http://jsfiddle.net/0sd99jnk/8/), see this question for more info on [> in css](http://stackoverflow.com/questions/3225891/what-does-the-greater-than-sign-css-selector-mean) — Lars, Aug 28 '15 at 11:43
@Lars : Like your first fiddle! http://jsfiddle.net/0sd99jnk/6/ this one! — Abhishek Ghosh, Aug 28 '15 at 11:45

score 1 · Accepted Answer · answered Aug 28 '15 at 11:47

1

Something like this perhaps? http://jsfiddle.net/web_nfo/0sd99jnk/7/

If you move the remove-button into a button 'container' it is a bit easier to get the final id.

The button container then looks something like this:

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

And the (jQuery) javascript (i guess you want some sort of ajax request, if you want to remove the button from the DOM directly, you can use the id here).

$('.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();
        });
    }
});

answered Aug 28 '15 at 11:47

Roel

447
4
11

what do you mean by button 'container' ? – Abhishek Ghosh Aug 28 '15 at 11:49
By the 'container' I mean the first div (CompanyID_0). Both the span (button) and the a (remove-button) are inside the 'container', because they belong to each other. It is a bit easier to get the id of the container when you click on the cross, by doing $(this).parent() with jQuery. – Roel Aug 28 '15 at 11:55
So you mean I should remove the hidden field right ? – Abhishek Ghosh Aug 28 '15 at 11:58
http://jsfiddle.net/abhighosh18/0sd99jnk/10/ : This is what should happen! My concern is the CSS you have used.. In my question please see the designer code.. I do not have any div with id `compName`..That is a label... Should I add a div ? – Abhishek Ghosh Aug 28 '15 at 12:01
Thank you for the answer! Everything works just fine! – Abhishek Ghosh Aug 28 '15 at 12:32
Nice to hear that! Yes you can still use the input fields, but I would also place them in the container. I made another jsFiddle with an example of what I mean, here you can also wait for the response (if the backend is unable to remove the company, you can show an error and keep the button in the DOM for the user to retry, but you can adjust it to whatever you like): http://jsfiddle.net/web_nfo/0sd99jnk/12/ – Roel Aug 28 '15 at 12:56
I just implemented that.. My ultimate aim was to use ajax to remove the data from back end too! thank you anews! – Abhishek Ghosh Aug 28 '15 at 13:00

Lars · Answer 2 · 2015-08-28T12:35:15.430

1

You'll need to add a wrapping element to enable the hover state for both the label and the cross-icon,

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

the icon gets put on a new line because of display:block, when we change that to display:inline-block it will be appended to the current line.

.mywrapper:hover > a {
  display :inline-block;
  position : relative;
}

the same applies to the wrapper element

div.mywrapper {
  margin : 15px;
  display:inline-block; 
}

See this fiddle

edited Aug 28 '15 at 12:35

answered Aug 28 '15 at 11:53

Lars

3,022
1
16
28

please give me a fiddle link ? so I can tell whether it works or not ! – Abhishek Ghosh Aug 28 '15 at 12:21
Because as I add a wrapper div , it spoils the CSS completely – Abhishek Ghosh Aug 28 '15 at 12:22

CSS hover on span problems

2 Answers2