CSSはホバーで、ショー「姪」

Question

は、ここで私が持っているコードです。

HTMLは変更できません。

私は他の場所を見て、解決策を見つけることができませんでした。私が正しくやっていることを本当に確信していません。助けがよかったです。

ありがとうございます！

Answer 1

「姪」セレクターとして.hoverDiv:hover ~ div .hoverDivShowを使用する必要があります。考え方は、.hoverDivの兄弟である<div>を選択し、クラスhoverDivShowを持つその兄弟の子供を選択することです。

はここで働いてデモです：

.hoverDivShow { 
 
    display: none; 
 
} 
 
.hoverDiv:hover ~ div .hoverDivShow { 
 
    display: block; 
 
}

<div class="hoverDiv">Hover</div> 
 
<div> 
 
    <div class="hoverDivShow">I'm hidden until you hover!</div> 
 
</div>

Answer 2

あなたの第二のCSSルール.hoverDiv:hover ~ .hoverDivShow { display: block }一般兄弟セレクタを使用しています。あなたはすべて要素の、DOMレベルと同じDOMレベル、hoverDivShowで検索しています。あなたの構造を見直すと、そのような要素が存在しないことがわかります。

As pointed out by Ed Cottrellの場合、そのクラスを持つ子を持つ兄弟が存在します。したがって、一般的な兄弟セレクタを使用すると、その兄弟の子供をターゲットにする必要があります。.hoverDiv:hover ~ div .hoverDivShow { [...] }

I made a fiddle for you一般的な兄弟セレクタのターゲティング構造を非常に視覚的に説明します。違いは、それはあなたと一致した場合にのみ、直接同じDOMレベルで、あなたの最初のセレクタの後の最初の要素をターゲットになるということです

.hoverDiv:hover + div .hoverDivShow { [...] } 

：あなたも、このような隣接兄弟セレクタを使用することができ、あなたの場合は

第2のセレクタ。 w3schoolsで私のフィドルとthis explanationをチェックしてください。