其他元素的 CSS 悬停触发器无法正常工作

Question

我目前正在为一个客户开发一个网站，我想创建一个悬停效果，当鼠标光标悬停在宽(几乎全屏)横幅图像上时，就会显示一个 80% 透明的文字 block 。 (出于兴趣以防万一这会影响它，我正在使用 Bootstrap)。

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。

Answer 1

你有错误的选择器.. + 将选择紧跟在 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>