在父级悬停上使跨度中的文本淡入

Question

在这段代码中

＆＃13;

＆＃13;

<div class="uploader">
  <a class="btn">
    <i class="fa fa-floppy-o"></i>
    <span>SEND</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

如果只使用CSS悬停div，如何使SEND淡入？

Answer 1

你可以这样做：

＆＃13;

＆＃13;

.uploader {
  border: 1px solid;
}

.btn {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.uploader:hover > .btn {
  opacity: 1;
  transition: opacity 1s ease-in;
}

＆＃13;

<div class="uploader">
  <a class="btn">
    <i class="fa fa-floppy-o"></i>
    <span>SEND</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个。

使用opacity指定元素的可见性，使用transition来确定延迟

＆＃13;

＆＃13;

.uploader a span {
  opacity: 0;
  transition: 1s;
}
.uploader:hover a span {
  opacity: 1;
}

＆＃13;

<div class="uploader">
  Hover this >>>
  <a class="btn">
    <i class="fa fa-floppy-o"></i>
    <span>SEND</span>
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

甚至更简单

<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; 
}