我的自适应图片库未正确转换字幕

Question

我非常希望在图像的底部有淡入淡出的字幕。在调试过程中，我发现div.desc应该是它应该存在的位置，就像它应该出现的那样，但是没有过渡可以这么说。

div.item hover应该div.img { border: 1px solid #ccc; } div.img:hover { border: 1px solid #777; } div.img img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; position: absolute; background: rgba(0,0,0,0.75); color: white; padding: 10px 20px; opacity: 0; bottom: 0; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; } a:hover .item { opacity: 1; left: 0; z-index: 500; } 的方法的语法可能不正确。

有人可以帮助指导我做错的事。

CSS：

<div class="responsive">
  <div class="img">
    <a target="_blank" href="img_fjords.jpg">
      <img src="/images/demo.jpg" alt="Find" width="535" height="535">
    </a>
    <div class="desc"><div class="item">This is the caption</div></div>
  </div>
</div>

使用我的HTML：

<select>

Answer 1

看起来您正试图在.desc上转换不透明度，不是吗？ 如果是这样，那么它无效的原因是因为您在:hover代码中选择了错误的元素。你想要写下这个而不是你所拥有的东西：

a:hover + .desc

原因是.item和.desc都不是您的锚标记的子项。 .desc是它的相邻单位，在CSS中使用+选择它们。此外，您希望转换具有属性的元素进行转换（在这种情况下，只有.desc的不透明度最初会更改）。