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

Posted 2023-05-08

【中文标题】使跨度中的文本在父悬停时淡入

【英文标题】：Make text in span fade in on parent hover

【发布时间】：2018-05-07 19:48:51

【问题描述】：

在这段代码中

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

当 div 仅使用 CSS 悬停时，如何使 SEND 淡入？

【参考方案1】：

你可以这样做：

.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>

【参考方案2】：

试试这个。

使用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>

【参考方案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;