Question

我想显示文本并在悬停时模糊图像。可以进行模糊处理，但永远不会显示文本。

CSS：

#d1{
  z-index: 100;
  position: absolute;
  top: 1100px;
  left: 285px;
  color: white;
  font-size: 100px;
  visibility: hidden;
 }

#bg2 {
    position: absolute;
    left: 0;
    right: 0;
    top: 898px;
    }  

#bg2:hover {
    filter: blur(5px) grayscale(1) brightness(.3);
    -webkit-filter: blur(5px) grayscale(100%) brightness(.3);
    transition: all .2s ease-in-out;
  -webkit-transition: all .2s ease-in-out;
   -moz-transition: all .2s ease-in-out;
   -o-transition: all .2s ease-in-out;
  transform: translateX(0);
   -webkit-transform: translateX(0);
}

#bg2:hover #d1{
  visibility: visible;
}

HTML：

 <a href="F2L.html">
   <img src="f2l.JPG" id="bg2" alt="">
  <p id="d1">F2L</p>
  </div>
</a>

bg2是图像ID。

d1是文本ID。

Answer 1

选择器#bg2:hover #d1有问题。它表明#d1在#bg2内部，而不是#d1和#bg2是兄弟姐妹。该代码必须为：

#bg2:hover ~ #d1{
  visibility: visible;
}

文字未显示在img：hover上

1 个答案: