时间戳

首页 > 解决方案 > img:hover 上未显示文本

html - img:hover 上未显示文本

问题描述

我想在悬停时显示文本并模糊图像。模糊有效，但从不显示文本。

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。

标签： htmlcss

解决方案

您的选择器有问题 #bg2:hover #d1。它表明它#d1在里面#bg2，而不是#d1兄弟#bg2姐妹。代码必须是：

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

推荐阅读