Showing just one instance of a class with jQuery

Question

I've googled and so searched this, but to no avail (probably poor search skills).

My problem is probably pretty simple, I simply want the mouseover event to only show the containing div (.action) when the list item is moused over (ui-state-default).

Here's the Markup

<ul id="column-2" class="connectedSortable">
    <li class="ui-state-default">feature
     <div class="action">
      <img src="delete.png" class="delete" alt="Delete this Story">
      <br />
      <img src="duplicate.png" class="delete" alt="Duplicate this Story">
     </div>
    </li>
    <li class="ui-state-default">forward
     <div class="action">
      <img src="delete.png" class="delete" alt="Delete this Story">
      <br />
      <img src="duplicate.png" class="delete" alt="Duplicate this Story">
     </div>
    </li>
</ul>

And the JavaScript

$(function() {  
    $(".ui-state-default").mouseenter(function(){
        $(".action").show();
    }).mouseleave(function(){
     $(".action").hide();
        });
});

Now I realise that this is going to show every occurrence of .action - but how can I make sure it only shows it within it's parent li? I've tried using the jquery parent/child arguements but have failed miserably.

Any help would be much appreciated.

Answer 1

$(function() {
  $(".ui-state-default).mouseenter(function() {
    $(this).find(".action").show();
  }).mouseleave(function() {
    $(this).find(".action").hide();
  });
});

Or just use the hover() event:

$(function() {
  $(".ui-state-default").hover(function() {
    $(this).find(".action").show();
  }, function() {
    $(this).find(".action").hide();
  });
});

Instead of:

$(this).find(".action")

you can also do:

$(this).children(".action")

or any number of other ways of selecting it.

Answer 2

You should constrain ".action" to current context (the list item you're hovering):

$(function (){
  $(".ui-state-default").hover(
    var listItem = this;
    function (){
      $(".action", listItem).show();         
    }
    ,
    function (){
      $(".action", listItem).hide();         
    }
  );
});