代码之家 › 专栏 › 技术社区 › lulZghost

css不透明度转换不工作

opacity hover css html

lulZghost · 技术社区 · 7 年前

对于一个网站,我想在表格中显示一些图片,但因为其中一些是库存照片,所以我需要一个来源。我希望在用户将鼠标悬停在图片上时显示源代码。所以我把source标记放在一个类(.PicSource)中,并给它{opacity 0;transition all.2s ease in},同时悬停在图片(.ServPic)上。ServPic:悬停+。PicSource{不透明度:1}。但它没有显示源文本,我也不知道为什么。其他悬停事件工作正常。我在悬停时用同样的方法隐藏标题,一切都很好。

下面是一个示例代码(它应该将.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>

1 回复 | 直到 7 年前

Johannes Piontkowitz 7 年前

“+”选择器用于直接同级。使用“~”选择常规同级。

看见 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标记与div处于同一级别,但与兄弟1、2和3不同。

现在 直接的 兄弟1的兄弟是兄弟2。兄弟2的直接兄弟是兄弟3,但是不 2,这很重要。

这个 全体的 兄弟1的兄弟姐妹是兄弟2和兄弟3。

推荐文章

camjames · Android Studio中的不透明度级别

7 年前

david · 标题栏中的滑块小部件

7 年前

David C. · 同级元素继承不透明度

7 年前

lulZghost · css不透明度转换不工作

7 年前

paulcook · CSS带渐变遮罩的垂直滚动字幕

7 年前

dzierzak · 谷歌表格图表-如何设置行的透明度?

7 年前

Vandan Shah · 粘性表格标题结构中的不透明度问题

7 年前

Jakob · 禁用(neo)vim中的背景透明度

7 年前

user8646839 · 我可以在Android Google map API中设置多段线不透明度吗

7 年前

Arkadis Stepanov · CSS不透明度在li中不起作用

8 年前