使用jQuery在鼠标悬停时选择父元素的兄弟元素

Question

我正在尝试更改.hover的父元素的同级元素.target的css。无法使此代码生效 - 我不确定在函数开始时是否需要使用$(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>

编辑----------------- 当class="hover"的span出现时，它似乎无法运行。

第二次编辑-------------------- 看起来我的<span>需要向上跳两层父元素，需要使用.parent().parent()。谢谢。

- Andrew Samuelsen

---

你是在调用 .sibling()（不存在）还是 .siblings()（存在）？ - Blazemonger

请查看已发布的jsfiddle链接，class="hover"在span上正常工作 :) - Marco Johannesen

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()方法。

注：以上均为jQuery中的方法，用于处理DOM元素的兄弟、父级和相邻元素等关系。

- David Thomas

Answer 2

Andy， 看看这个fiddle，你似乎在第一个示例中发布了正确的代码。如果您可以发布您的html，我们可能会更好地帮助您。http://jsfiddle.net/nKtzB/3/

- sottenad

Answer 3

如果你想对块级元素进行操作，可以尝试使用display:block。

你的代码还是没问题的，可以看这里：http://jsfiddle.net/Mx4ks/1/

---

肯定还有其他问题...试试把你的HTML代码也粘贴进来 :)

在这里查看你自己的代码效果：http://jsfiddle.net/Mx4ks/

- Marco Johannesen