Question

我用Google搜索并搜索了这个，但无济于事（可能搜索技巧不佳）。

我的问题可能很简单，我只是希望mouseover事件只在列表项被鼠标悬停时显示包含的div（.action）。（/ i-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的每一次出现 - 但是我怎样才能确保它只在它的父李中显示它？我已经尝试过使用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")

或任何其他选择方式。

Answer 2

您应该将“.action”约束到当前上下文（您正在悬停的列表项）：

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

用jQuery只显示一个类的一个实例

2 个答案: