Показ только одного экземпляра класса с jQuery

Question

Я гуглил и поэтому искал это, но безрезультатно (вероятно, плохие навыки поиска).

Моя проблема, вероятно, довольно проста, я просто хочу, чтобы событие mouseover показывало содержащий div (.action), только когда элемент списка наведен на (ui-state-default).

Вот разметка

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

И JavaScript

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

Теперь я понимаю, что это будет показывать каждый случай .action - но как я могу убедиться, что он показывает только его в родительском li? Я пытался использовать аргументы jquery parent / child, но с треском провалился.

Любая помощь будет высоко ценится.

Answer 1

Вы должны ограничить ".action" текущим контекстом (элемент списка, который вы наведите):

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

Answer 2

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

Или просто используйте событие hover ():

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

Вместо:

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

Вы также можете сделать:

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

или любой другой способ выбора.