css - 非親 div をクリックして div を非表示にする

Question

私のサイトには 2 つの異なる div がありますが、同じ親 div (2 つの子 div) があります。だから、私はこれをしたい: div.1:hover-> div.2{display:none}. CSSを使用してどのように行うことができますか？

score 4 · Accepted Answer

HTML のレイアウト方法によっては、機能する可能性があります。div は次のように隣接している必要があります。

<div class="first">
  First div
</div>
<div class="second">
  Second div
</div>

次に、この CSS を使用します。

div.first:hover + div.second { display: none; }

score 0 · Accepted Answer

これを行う簡単な方法は次のとおりです。

次のようなHTMLがある場合:

<div class="wrap">
    <div class="first">First div</div>
    <p>some other element...</p>
    <div class="second">Second div</div>
</div>

あなたのCSSは次のようになります：

.first:hover ~ .second {
    display: none;
}

この例では、とが同じ親要素内の兄弟要素でなければならないという 1 つの制限が.firstあります。.second.wrap

一般的な兄弟コンビネータ~は IE7+ でサポートされています

参照: https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

3 に答える 3