我怎样才能产生过渡效果

Question

我需要transition效果的帮助。我有代码块，我想添加悬停transition效果。我该怎么办？

＆＃13;

＆＃13;

.mockup img {
  cursor: pointer;
}

.mockup img:last-child {
  display: none;
}

.mockup:hover img:first-child {
  display: none;
}

.mockup:hover img:last-child {
  display: inline-block;
}

＆＃13;

<div class="row">
  <div class="col-lg-8 mx-auto mockup">
    <img src="http://lorempixel.com/output/animals-q-c-640-480-9.jpg">
    <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

很遗憾，您无法向显示属性添加转换，但可以使用不透明度或可见性替换它

因此您的代码可以替换为：

.mockup img {
    cursor: pointer;
    transition: all 0.3s ease;
}

.mockup img:last-child {
    opacity: 0;
    visibility: hidden;
}

.mockup:hover img:first-child {
    opacity: 0;
    visibility: hidden;
}

.mockup:hover img:last-child {
    opacity: 1;
    visibility: visible;
}