Question

我有以下内容：

我只是在悬停效果（透明度）开始时才显示文本。文本应该是完全不透明，非常易读，但只能在悬停时，在不透明图像的顶部。这可以只使用CSS吗？

.image img {
  width: 200px;
  height: 200px;
}

.fade {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.fade:hover {
  opacity: 0.4;
}

.image {
  background-color: black;
  width: 300px;
}

.text {
  color: red;
  position: absolute;
  top: 10px;
  left: 100px;
  visibility: hidden;
  width: 100%;
  height: 100%;
}

.text:hover {
  visibility: visible;
}


}

<div class="image">
  <img class="fade" src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
  <div class="text">TEST</div>
</div>

Answer 1

使用嵌套选择器在包含元素的悬停时触发，而不是触发子元素的悬停：

div:hover .fade {
    opacity: 0.4;
}
div:hover .text{
    visibility: visible;
}

这是它可以工作的唯一方式，因为否则元素会相互模糊，因此它们本身都不会获得:hover行为。但是父母会这样做，允许你选择孩子。

Working sample

仅在CSS转换开始时才在div中显示文本？

1 个答案: