jQuery选择器的父母和孩子？

Question

我想要类似Wordpress对其帖子执行的操作-操作。

我的HTML

<div class="onhover">
  <p class="">This is a paragraph. My background will be yellow when you hover over me — even if you're using Internet Explorer.</p>
  <div class="actions"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Modify</a> | <a href="#">Delete</a></div>  
</div>
<div class="onhover">  
  <p class="">Move your mouse over me! Move your mouse over me! I'll turn yellow, too! Internet Explorer users welcome!</p>
  <div class="actions"><a href="#">Add</a> | <a href="#">Edit</a> | <a href="#">Modify</a> | <a href="#">Delete</a></div>
</div>

CSS

* { margin:0; padding:0; font-family:Verdana, Arial, Helvetica, sans-serif; }
    div.actions { padding:5px; font-size:11px; visibility: hidden; }
    #hover-demo1 p:hover {
        background: #ff0;
    }
    .pretty-hover {
        background: #fee;
        cursor: pointer;
    }

jQuery的

$(document).ready(function() {
      $('.onhover p').hover(function() {
        $(this).addClass('pretty-hover');
        $('div.actions').css('visibility','visible');
      }, function() {
        $(this).removeClass('pretty-hover');
        $('div.actions').css('visibility','hidden');
      });
    });

我想要的是，将鼠标悬停在特定的P元素上时，相应的动作应该是可见的，当前，将鼠标悬停在ap元素上的所有其他动作都可见。 我如何只限于特定的一个？

Answer 1

无需设置CSS可见性属性。 已经有用于隐藏和显示事物的jQuery方法。 只需使用next()遍历方法即可。

$(document).ready(function() {
  $('.onhover p').hover(function() {
    $(this).addClass('pretty-hover');
    $(this).next().show();
  }, function() {
    $(this).removeClass('pretty-hover');
    $(this).next().hide();
  });
});

Answer 2

可能一开始会隐藏所有div.actions，并且仅在将parent悬停时显示：

$(document).ready(function() {
  $('div.actions').hide();
  $('.onhover p').hover(function() {
    $(this).addClass('pretty-hover');
    $(this).children('div.actions:first').show();
  }, function() {
    $(this).removeClass('pretty-hover');
    $(this).children('div.actions:first').hide();
  });
});