使用jQuery在悬停时选择父级的兄弟

Question

我正试图改变.target那个兄弟的兄弟姐妹.hover.似乎无法使这段代码工作 - 我不确定我的函数开头是否需要$(this),或$('.target')...我认为它可能是.target因为那个是我正在改变的CSS .css().

<script type="text/javascript">
$(document).ready(function() {
    $('.hover').hover(
        function(){
            $(this).parent().siblings('.target').css('display', 'inline');
        },
        function(){
            $(this).parent().siblings('.target').css('display', 'none');
        }
    );
});
</script>

这是我的预感(也不起作用):

$('.target').parent(this).sibling().css('display', 'inline');

这是html

<div class="target" style="display: none;">
</div>
<div>
    <span class="hover">Hover</span>
</div>

编辑-----------------看来,当它不工作span的class="hover".

EDIT numero dos --------------------看来我的<span>父母很深,需要.parent().parent()谢谢.

Answer 1

假设您的html符合您的预期,并且没有看到它我无法评论改进,这应该工作:

$('.target').parent().siblings('.target').css('display', 'inline');

或者,如果.target元素是下一个兄弟:

$('.target').parent().next('.target').css('display', 'inline');

或者,如果之前的兄弟(以及您发布的html 是以前的兄弟):

$('.target').parent().prev('.target').css('display', 'inline');

参考文献:

• .siblings().
• .parent().
• .sibling().
• .prev().
• .next().

Answer 2

安迪,看看这个小提琴,你似乎在你发布的第一个样本中有正确的代码.如果您可以发布您的HTML,我们可能会有更好的时间帮助您.http://jsfiddle.net/nKtzB/3/