Question

我已经谷歌搜索过了，但毫无结果（可能是搜索技巧太差）。

我的问题可能很简单，我只想让鼠标悬停事件在鼠标悬停在列表项 (ui-state-default) 上时仅显示包含 div (.action)。

这是标记。

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

或者任何其他方式来选择它。

Answer 2

你应该将“.action”限制在当前背景下（你正在悬停的列表项）。

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

友情链接