当父级处于悬停状态时CSS过渡子级

Posted 2023-03-06

【中文标题】当父级处于悬停状态时CSS过渡子级

【英文标题】：CSS transitioning child when parent is in hover state

【发布时间】：2018-02-20 09:32:27

【问题描述】：

每当 h1 元素处于“悬停”状态时，我都会尝试将 h1 标题中的每个字母移动到特定的新位置。重点是揭示字谜“追逐者”到“搜索”

当前，当鼠标悬停在标题上时，所有字母都会移动到正确的位置，但没有任何过渡。

h1 
  text-align:left;
  font-family:'Ubuntu Mono', monospace;
  font-size: 8vw;
  font-weight:400;
  margin:3vw 0;


.mover span 
  position:relative;
  -webkit-transition: .5s right ease;
  transition: .5s right ease;


.mover:hover #c 
  left:16vw;


.mover:hover #h 
  left:16vw;


.mover:hover #s 
  right:12vw;


.mover:hover #e 
  right:12vw;
   

.mover:hover #r
  right:8vw;

<h1 class="mover">
  <span id="c">c</span>
  <span id="h">h</span>
  <span id="a">a</span>
  <span id="s">s</span>
  <span id="e">e</span>
  <span id="r">r</span>
</h1>

如果有人可以解释为什么这是不复存在的，并且如果仅使用 CSS 就可以实现所需的效果/交互性，那将不胜感激。

【参考方案1】：

为了使 CSS 过渡生效，您需要同时设置 before 和 after 属性。所以如果你想让#c从0移动到16vw，你需要在非悬停状态下将初始位置设置为0和16vw的新位置在悬停状态。

在这里显示：

h1 
    text-align: left;
    font-family: 'Ubuntu Mono', monospace;
    font-size: 8vw;
    font-weight: 400;
    margin: 3vw 0;


.mover span 
    position: relative;
    -webkit-transition: .5s right ease, .5s left ease;
    transition: .5s right ease, .5s left ease;


#c, #h 
    left: 0;


#s, #e, #r 
    right: 0;


.mover:hover #c 
    left: 16vw;


.mover:hover #h 
    left: 16vw;


.mover:hover #s 
    right: 12vw;


.mover:hover #e 
    right: 12vw;
   

.mover:hover #r 
    right: 8vw;

<h1 class="mover">
    <span id="c">c</span>
    <span id="h">h</span>
    <span id="a">a</span>
    <span id="s">s</span>
    <span id="e">e</span>
    <span id="r">r</span>
</h1>

您还需要为 left 和 right 属性指定转换。

请注意，您不能只在跨度定义上设置两个初始属性，因为其中一个或另一个将优先（取决于文本方向）。