在父级悬停上使跨度中的文本淡入
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在父级悬停上使跨度中的文本淡入相关的知识，希望对你有一定的参考价值。
在这段代码中
<div class="uploader">
<a class="btn">
<i class="fa fa-floppy-o"></i>
<span>SEND</span>
</a>
</div>如何在仅使用CSS徘徊div时使SEND淡入？
答案
你可以这样做：
.uploader {
border: 1px solid;
}
.btn {
opacity: 0;
transition: opacity 1s ease-out;
}
.uploader:hover > .btn {
opacity: 1;
transition: opacity 1s ease-in;
}<div class="uploader">
<a class="btn">
<i class="fa fa-floppy-o"></i>
<span>SEND</span>
</a>
</div>另一答案
试试这个。
使用opacity指定元素和transition的可见性以进行延迟
.uploader a span {
opacity: 0;
transition: 1s;
}
.uploader:hover a span {
opacity: 1;
}<div class="uploader">
Hover this >>>
<a class="btn">
<i class="fa fa-floppy-o"></i>
<span>SEND</span>
</a>
</div>另一答案
甚至更简单
<div class="uploader">
<a class="btn">
<i class="fa fa-floppy-o"></i>
<span class="hide">SEND</span>
</a>
</div>
.
.hide{
opacity:0;
transition:opacity 1s linear;
}
.uploader:hover .hide{
opacity:1;
}
以上是关于在父级悬停上使跨度中的文本淡入的主要内容，如果未能解决你的问题，请参考以下文章