Question

我的代码中有一个父div，还有两个子div。我想要那个徘徊在第一个孩子，第二个孩子隐藏。我想只用css或js来做。

<div class="parrent">
    <div id="child1">
        Hide child2
    </div>

    <div id="child2">  
        I must hide
    </div>
</div>

谢谢！

Answer 1

使用此：

#child1:hover ~ #child2 {
    visibility:hidden;
}

Demo

这使用General sibling combinator ~

〜选择器：一般兄弟组合子选择器与我们刚才看到的相邻兄弟组合子选择器非常相似。不同之处在于被选中的元素不需要立即成功获得第一个元素，但可以出现在它之后的任何地方。

您还可以使用 Adjacent sibling combinator +，具体取决于您的其余代码。

+ 选择器：相邻的兄弟组合子选择器允许您选择直接在另一个特定元素之后的元素。

#child1:hover + #child2 {
    visibility:hidden;
}

Demo

Answer 2

#child1:hover #child2 {
    visibility:hidden;
}

这不起作用，因为现在你说#child2必须是#child1的孩子。

你可以做的是：

$(document).ready(function(){
    $('#child1').hover(function(){
        $('#child2').hide();
    }, function(){
        $('#child2').show();
    });
});

或者使用CSS代码：

#child1:hover ~ #child2 {
    visibility:hidden;
}

Answer 3

您可以使用以下jquery代码：

$(document).ready(function(){
    $('#child1').on('mouseover',function(){
        $("#child2").hide();
    }).on('mouseout',function(){
        $("#child2").show();
    });
});

Answer 4

在此之前，您应该知道如何在CSS中引用元素的兄弟元素。

而不是以下语法 -

#child1:hover #child2

您需要以下内容：

#child1:hover+#child2

<强> Fiddle demo

N.B。基本上+用于引用兄弟

<强> Reference

CSS：隐藏另一个div

4 个答案:

Demo

Demo