Question

我有一个包含两张图片的div元素。使用CSS :hover，我切换两个图像的显示（FontAwesome图标）

<div class="alternating-content-item-content alternating-content-item__content col-md-6">
  <div class="alternating-content-item-content__padding">
    <h3 class="alternating-content-item-content__heading">Trading</h3>
    <p class="alternating-content-item-content__blurb">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
    <a href="http://www.google.com" target="_blank" class="alternating-content-item-content__link">
      Read More
      <i class="fa fa-chevron-right fa-hover-hidden read-more-icon"></i>
      <i class="fa fa-arrow-right fa-hover-show read-more-icon"></i>
    </a>
  </div>
</div>

我的CSS是

.fa.fa-hover-show {
    display: none;
}

&:hover {
    .fa.fa-hover-hidden {
        display: none;
    }

    .fa.fa-hover-show {
        display: inline-block;
    }
}

如何将转换/转换添加到div hover事件以在两个fa图标之间制作平滑动画？

Answer 1

如果你想要一个流畅的动画，你应该使用opacity。例如：

button {
    transition: opacity 0.5s linear;
}

.fa.fa-hover-show {
    opacity: 0
}

button:hover {
    .fa.fa-hover-hidden {
        opacity: 0
    }

    .fa.fa-hover-show {
        opacity: 1
    }
}

切换两个图像之间的切换

1 个答案: