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

Question

我有以下内容：

http://jsfiddle.net/Zf5am/579/

我试图仅在悬停效果（透明度）启动时显示文本。文本应该是完全不透明的，非常易读，但仅在悬停时，在不透明图像之上。这可以仅使用 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行为。父母会这样做，允许您选择它的孩子。

工作样本。