jquery - 使用 jQuery 仅显示类的一个实例

Question

我用谷歌搜索过这个，但没有结果(可能是搜索技巧很差)。

我的问题可能非常简单，我只是希望当鼠标悬停在列表项上时，鼠标悬停事件仅显示包含的 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 父/子争论，但惨败。

任何帮助将不胜感激。

Answer 1

$(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")

或任何其他选择方式。