Question

对于一个网站，我想在一张桌子上显示一些图片，但因为其中一些是Stock Photos，所以我需要一个Source。我希望在用户将鼠标悬停在图片上时显示源。所以我把源标签放在一个类（.PicSource）中并给它{opacity 0;转换所有.2s轻松}并悬停在图片上（.ServPic）.ServPic：hover + .PicSource {opacity：1}。但它没有显示源文本，我也不知道为什么。其他悬停事件工作正常。我在悬停时使用相同的东西来隐藏Caption，并且一切都很好。

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

＆＃34; +＆＃34; slector是直接兄弟姐妹。使用＆＃34;〜＆＃34;。

选择一般兄弟姐妹

请参阅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。兄弟姐妹2的直接兄弟姐妹是兄弟3，但不 2，这很重要。

Sibling1的一般兄弟姐妹是sibling2和sibling3。

css不透明度转换不起作用

1 个答案: