css 不透明度过渡不起作用

Question

对于一个网站，我想在 table 中显示一些图片，但是因为其中一些是 Stock Photos，所以我需要一个 Source。我希望在用户将鼠标悬停在图片上时显示源。所以我把来源标签放在 class (.PicSource) 并给它 { opacity 0;转换所有 .2s ease-in} 并将鼠标悬停在图片 (.ServPic) .ServPic:hover + .PicSource {opacity: 1} 上。但是它没有显示源文本，我不知道为什么。其他 hover-Events 工作正常。我用同样的方法在悬停时隐藏标题，一切都很好。

所以这是一个示例代码（它应该将 .PicSource 的不透明度更改为 1 但它没有，因此您可以手动更改它以查看它）

.ServPic {
  width: 350px;
  height: 275px;
  opacity: 0.5;
  transition: opacity .2s ease-in;
}

.PicCapt {
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 1;
  transition: opacity .2s ease-in;
}

.PicSource {
  position: absolute;
  top: 0%;
  left: 20%;
  opacity: 0;
  color : #000000;
  transition: all .2s ease-in;
}

.ServPic:hover {
  opacity: 1;
}

.ServPic:hover+.PicCapt {
  opacity: 0;
}

.ServPic:hover+.PicSource {
  opacity: 1;
}

<table>
  <tr>
    <td>
      <div>
        <img class="ServPic" src="https://cdn.lrb.co.uk/blog/wp-content/uploads/2014/03/Lorem_Ipsum.jpg">
        <a class="PicCapt">CAPTION</a>
        <a class="PicSource">SOURCE.COM</a>
      </div>
    </td>
  </tr>
</table>

Answer 1

“+”选择器用于直系兄弟姐妹。 Select一般兄弟姐妹用“~”。

见this fiddle.

代码：

.ServPic:hover ~ .PicSource {
  opacity: 1;
}

让我对 css 中的同级选择器添加一些解释。

首先，兄弟姐妹是 html 中处于完全同一级别的元素。

一个例子：

<div>
   <p id="sibling1"></p>
   <p id="sibling2"></p>
   <a id="sibling3"></a>
</div>
<p>I am not a sibling of 1, 2 and 3.</p>

同级 1、2 和 3 在您的标记中都处于同一级别。 div 下的 p-tag 与 div 处于同一级别，但与兄弟姐妹 1、2 和 3 不同。

现在 sibling1 的直接兄弟姐妹是 sibling2。 Sibling2的直系兄弟是sibling3，但是不是2，这点很重要。

Sibling1 的 general 兄弟姐妹是 sibling2 和 sibling3。

css 不透明度过渡不起作用

css opacity transition not working

html

css

hover

opacity