CSSホバーは他の要素が正しく動作しないトリガーです

Question

私は現在、クライアント用のウェブサイトで作業しています。ホバー効果を作成したいと考えています。マウスカーソルを置くと、80％透明ブロックが表示されます（ほぼフルスクリーンの）バナー画像が表示されます。 （これが問題になる場合は、ブートストラップを使用しています）。

HTMLレイアウトは次のとおりです。私もために以下のCSSを試してみました

#Active_Pureness_Banner { 
position: relative; 
display: inline-block; 
} 
#Active_Pureness_Overlay { 
position: absolute; 
left: 20px; 
top: 0px; 
text-align: center; 
width: 40vw; 
height: 95%; 
color: transparent; 
} 
#Active_Pureness_Overlay_Title { 
font-family: 'Nobile', sans-serif; 
font-weight: 700; 
font-size-adjust: auto; 
position: relative; 
top: 0px; 
background-color: transparent; 
color: transparent; 
height: 95%; 
padding-top: 17%; 
} 
#Active_Pureness_Wrapper:hover, 
#Active_Pureness_Wrapper:focus, 
#Active_Pureness_Wrapper:active + #Active_Pureness_Overlay { 
color: black; 
background-color: rgba(155,175,195,0.8); 
} 

：

<div class="row" id="Active_Pureness_Wrapper"> 
     <div id="Active_Pureness_Banner"> 
      <img class="img-responsive" src="assets/Active_Pureness/Active_Pureness_Banner.jpg"> 
     </div> 
     <div id="Active_Pureness_Overlay"> 
      <p id="Active_Pureness_Overlay_Title">Active Pureness</p> 
     </div> 
</div> 

私はCSSコードの次のスタイルを使用して試してみましたホバー効果を作成するにはホバートランジション：

#Active_Pureness_Wrapper:hover + #Active_Pureness_Overlay , 
#Active_Pureness_Wrapper:focus + #Active_Pureness_Overlay , 
#Active_Pureness_Wrapper:active + #Active_Pureness_Overlay { 
color: black; 
background-color: rgba(155,175,195,0.8); 
} 

残念ながら、それは正しく読まれないようです。ブラウザでエフェクトをテストすると、兄弟要素#Active_Pureness_Overlayをターゲットにするのではなく、ベース#Active_Pureness_Wrapperにエフェクトが適用されますか？私はまた、~のような異なる関係セレクタを使ってみましたが、何も動作していません。このCSSマークアップを正しく使用していますか、ここで何か問題がありますか？

私は、行を別々のCSSコマンドに分割すると、そのいずれも登録されません。この問題は、トリガーの後半である+ #Active_Pureness_Overlayと思われます。 div要素の直後に配置された要素を選択しますあなたは間違った選択を持っている

Answer 1

を両親#Active_Pureness_Wrapperあるすべての要素を選択しますID #Active_Pureness_Overlay。

#Active_Pureness_Wrapper:hover > #Active_Pureness_Overlayから

変更またはこのようなホバーの影響を受けています要素変更：

#Active_Pureness_Banner:hover + #Active_Pureness_Overlay

を

Answer 2

.. + ..

ので>を使用しています。それはあなたが親要素#Active_Pureness_Wrapperにホバーを適用していると、彼が持つすべての兄弟を見つけていないので、これは動作しません。..

#Active_Pureness_Banner { 
 
    position: relative; 
 
    display: inline-block; 
 
    
 
} 
 

 
#Active_Pureness_Overlay { 
 
    position: absolute; 
 
    left: 20px; 
 
    top: 0px; 
 
    text-align: center; 
 
    width: 40vw; 
 
    height: 95%; 
 
    color: transparent; 
 
} 
 

 
#Active_Pureness_Overlay_Title { 
 
    font-family: 'Nobile', sans-serif; 
 
    font-weight: 700; 
 
    font-size-adjust: auto; 
 
    position: relative; 
 
    top: 0px; 
 
    background-color: transparent; 
 
    color: transparent; 
 
    height: 95%; 
 
    padding-top: 17%; 
 
} 
 

 
#Active_Pureness_Wrapper:hover > #Active_Pureness_Overlay, 
 
#Active_Pureness_Wrapper:focus > #Active_Pureness_Overlay, 
 
#Active_Pureness_Wrapper:active > #Active_Pureness_Overlay { 
 
    color: black; 
 
    background-color: rgba(155, 175, 195, 0.8); 
 
}

Hover Here 
 
<div class="row" id="Active_Pureness_Wrapper"> 
 
    <div id="Active_Pureness_Banner"> 
 
    
 
    <img class="img-responsive" src="assets/Active_Pureness/Active_Pureness_Banner.jpg"> 
 
    </div> 
 
    <div id="Active_Pureness_Overlay"> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    <p id="Active_Pureness_Overlay_Title">Active Pureness</p> 
 
    </div> 
 
</div>