CSS懸停觸發器的其他元素無法正常工作

我目前正在爲客戶端的網站工作，我想創建一個懸停效果，其中80％的透明區塊與寫作出現時，只要鼠標光標懸停焦點在一個寬（幾乎全屏）橫幅圖像。（爲了好處，如果這影響到它，我使用Bootstrap）。CSS懸停觸發器的其他元素無法正常工作

HTML佈局如下：

<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_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); 
}

我也曾嘗試以下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_Wrapper，而不是針對同級元素#Active_Pureness_Overlay？我也嘗試使用不同的關係選擇器，如~，但沒有任何工作。我正確使用這個CSS標記或者在這裏做錯了什麼？

經過調查，當我把這些行分成單獨的CSS命令時，他們都沒有註冊。問題似乎與觸發器的後半部分+ #Active_Pureness_Overlay有關。

來源

2017-09-18 Graeme Ford

這不會起作用，因爲你申請懸停父元素#Active_Pureness_Wrapper和他沒有找到任何同級ID #Active_Pureness_Overlay。

更改爲#Active_Pureness_Wrapper:hover > #Active_Pureness_Overlay或變更此受着懸停這樣的元素：

#Active_Pureness_Banner:hover + #Active_Pureness_Overlay

來源

2017-09-18 06:15:08

你有錯選擇.. +將選擇是div後立即放置元素..

因此，使用>。它會選擇其父母是#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>

來源

2017-09-18 06:14:33

CSS懸停觸發器的其他元素無法正常工作

回答

相關問題