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悬停触发器的其他元素无法正常工作

回答

相关问题