javascript - CSS:隐藏另一个div

Question

我的代码中有一个父 div 和 2 个子 div。我希望第一个 child 悬停，第二个 child 隐藏。我只想使用 css 或 js 来做到这一点。

Here's my Fiddle

<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 ~

~ selector: The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.

---

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

+ selector: An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.

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

Demo