代码之家 › 专栏 › 技术社区 › Srini

jQuery选择器父母和子女?

jquery

Srini · 技术社区 · 15 年前

我想要一个类似于Wordpress对posts-actions所做的事情。

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

* { 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;
    }

滑动分页

$(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元素时,相应的操作应该是可见的,当前在hover一个P元素上所有其他的操作都是可见的。我该如何局限于某个特定的?

2 回复 | 直到 15 年前

cletus 15 年前

不需要设置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();
  });
});

stefita 15 年前

$(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();
  });
});

推荐文章

Newbie_Coder · 如何使用Jquery无画布裁剪框架

1 年前

usman610 · Javascript代码在点击回车键和点击按钮时删除行

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Carly · 在页面加载时滑入div,然后单击以滑入和滑出(jQuery)

1 年前

Community wiki · jquery弹出窗口不会用按键关闭,但会点击

1 年前

Community wiki · Smarty IE9请求下载index.php文件(在上传未发生后)?是我的代码出错还是activecollab?

1 年前

Community wiki · 无法从jquery文档调用函数

2 年前

marzouk najib · Uncaught ReferenceError:未定义FullCalendar

2 年前

Pepe · 检查“data”属性是否包含输入值的一部分(jQuery)

2 年前

laurence keith albano · 如何使用Jquery在父类内添加子父类

2 年前