Question

我正在尝试复制this package's的基本功能，即在链接悬停时以某种过渡/动画形式显示图像。

我选择不使用该软件包，因为它没有说明，并且将其实施到我的工作中比完成的事情更加混乱，而且相当繁重。我已经用一些基本的CSS完成了揭示功能，但是我试图在图像显示时添加某种淡入淡出或滑动过渡。我尝试过transition: display 0.5s ease;，但没有效果。

<a href="#">
  <h1>Hover Link</h1>
  <span>
    <img src="https://edit.co.uk/uploads/2016/12/Image-1-Alternatives-to-stock-photography-Thinkstock.jpg" height="100" />
  </span>
</a>


a {
  position: relative;
}
a:hover > span {
  display: block;
}
a:hover > span img {
  width: 200px;
  height: auto;
}
a > span {
  display: none;
  position: absolute;
  z-index: 99;
  transition: display 0.5s ease;
}

演示：https://codepen.io/anon/pen/GzrKRM

Answer 1

尝试使用visiblity和opacity，因为对于display，无法应用transition。 transition适用于不透明度。

img {
  width: 200px;
  height: auto;
}

a {
  position: relative;
}
a:hover > span {
  display: block;
  opacity: 1;
  visibility: visible;
}
a > span {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  z-index: 99;
  transition: opacity 0.5s ease;
}

<a href="#">
  <h1>Hover Link</h1>
  <span>
    <img src="https://edit.co.uk/uploads/2016/12/Image-1-Alternatives-to-stock-photography-Thinkstock.jpg" height="100" />
  </span>
</a>

如果visibility也没有使用，它将无法正常工作。如您所见：（没有visibility）

img {
  width: 200px;
  height: auto;
}

a {
  position: relative;
}
a:hover > span {
  display: block;
  opacity: 1;
}
a > span {
  opacity: 0;
  position: absolute;
  z-index: 99;
  transition: opacity 0.5s ease;
}

<a href="#">
  <h1>Hover Link</h1>
  <span>
    <img src="https://edit.co.uk/uploads/2016/12/Image-1-Alternatives-to-stock-photography-Thinkstock.jpg" height="100" />
  </span>
</a>

通过过渡显示链接悬停时的图像

1 个答案: