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 行为。父级确实如此，允许您选择它的子级。

Working sample .