Question

我目前正在为一个客户开发一个网站，我想创建一个悬停效果，只要鼠标光标悬停在一个宽（几乎全屏）横幅图像上，就会显示80％带透明的透明块。（为了感兴趣，如果这会影响它，我使用的是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的所有元素。

＆＃13;

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

＆＃13;

  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>

＆＃13;

Answer 2

这不起作用，因为您将悬停应用于父元素 #Active_Pureness_Wrapper ，并且他找不到任何ID为 #Active_Pureness_Overlay 的兄弟。

更改为#Active_Pureness_Wrapper:hover > #Active_Pureness_Overlay或更改受悬停影响的元素，如下所示：

#Active_Pureness_Banner:hover + #Active_Pureness_Overlay

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

2 个答案: