Below is a preview of what I have:

---

---

On the right is when I hover. What I want is for the delete icon to only show for that hover item.

<script>
$(document).ready(function(){ 

    $(".removeService").hide();     

    // Deleting an Individual Service
    $("#dashboard ul li span").hover( function() {
        $(".removeService").show();
    });

});
</script>

This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.

Thanks!

Below is a preview of what I have:

---

---

On the right is when I hover. What I want is for the delete icon to only show for that hover item.

<script>
$(document).ready(function(){ 

    $(".removeService").hide();     

    // Deleting an Individual Service
    $("#dashboard ul li span").hover( function() {
        $(".removeService").show();
    });

});
</script>

This is probably a very simple fix, but if anyone could point me in the right direction I would really appreciate it.

Thanks!

• javascript
• jquery

Share Improve this question Follow asked Jan 13, 2012 at 20:21 DrewDrew 6,8721919 gold badges6565 silver badges9797 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

If you want the delete span to show only when hovered over and hidden when the mouse exits, you can use an 'overload' for the .hover() function by providing a second function that hides the delete span.

See this fiddle here for an example.

A very simplified example could look like this:

$(document).ready(function(){
    $('.remoteService').hide()
        .click(function(){alert('delete!');});

    $('#dashboard ul li span').hover(
    function(){  //this is fired when the mouse hovers over
        $(this).find('.remoteService').show();
    },
    function(){  //this is fired when the mouse hovers out
         $(this).find('.remoteService').hide();
    });

});

I hope this helps!

<script>
$(document).ready(function(){ 

    $(".removeService").hide();     

    // Deleting an Individual Service
    $("#dashboard ul li span").hover( function() {
        $(this).find(".removeService").show();
    });

});
</script>

This assumes that .removeService is nested within #dashboard ul li span. If this is not the case, please provide your html.

In the code this is the actual span which is hovered on. find will search within that span for all elements with the removeService class.

Edit:

Used image tag instead of background-image(see DEMO link at the bottom) to make it click-able.

DEMO here.

---

Why not use CSS :hover to get the same effect.

DEMO here

You have to do this with jQuery, you can achieve the same behavior with pure CSS:

#dashboard ul li .removeService {
    display: none;
} 

#dashboard ul li:hover .removeService {
    display: inline;
} 

Example on jsfiddle