Html CSS在父对象处于悬停状态时转换子对象

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

当前，当鼠标悬停在标题上时，所有字母都会移动到正确的位置，但不会进行任何类型的转换

h1{
文本对齐：左对齐；
字体系列：'ubuntumono'，monospace；
字体大小：8vw；
字体大小：400；
利润率：3vw 0；
}
.移动器跨度{
位置：相对位置；
-webkit过渡：.5s右缓；
过渡：.5s右缓；
}
.mover:悬停#c{
左：16vw；
}
.mover:悬停#h{
左：16vw；
}
.mover:悬停{
右：12vw；
}
.mover:悬停#e{
右：12vw；
}   
.mover:悬停#r{
右：8vw；
}

C
H
A.
s
E
R

为了让CSS转换生效，您需要同时设置before和after属性。因此，如果希望

#c

从

0

移动到

16vw

，则需要在非悬停状态下将初始位置设置为

0

，在悬停状态下将新位置设置为

16vw

在此显示：

h1{
文本对齐：左对齐；
字体系列：“Ubuntu Mono”，monospace；
字体大小：8vw；
字体大小：400；
利润率：3vw 0；
}
.移动器跨度{
位置：相对位置；
-webkit过渡：.5s右缓、.5s左缓；
过渡：.5s右缓、.5s左缓；
}
#c、 #h{
左：0；
}
#s、 #e，#r{
右：0；
}
.mover:悬停#c{
左：16vw；
}
.mover:悬停#h{
左：16vw；
}
.mover:悬停{
右：12vw；
}
.mover:悬停#e{
右：12vw；
}   
.mover:悬停#r{
右：8vw；
}

C
H
A.
s
E
R

为了让CSS转换生效，您需要同时设置before和after属性。因此，如果希望

#c

从

0

移动到

16vw

，则需要在非悬停状态下将初始位置设置为

0

，在悬停状态下将新位置设置为

16vw

在此显示：

h1{
文本对齐：左对齐；
字体系列：“Ubuntu Mono”，monospace；
字体大小：8vw；
字体大小：400；
利润率：3vw 0；
}
.移动器跨度{
位置：相对位置；
-webkit过渡：.5s右缓、.5s左缓；
过渡：.5s右缓、.5s左缓；
}
#c、 #h{
左：0；
}
#s、 #e，#r{
右：0；
}
.mover:悬停#c{
左：16vw；
}
.mover:悬停#h{
左：16vw；
}
.mover:悬停{
右：12vw；
}
.mover:悬停#e{
右：12vw；
}   
.mover:悬停#r{
右：8vw；
}

C
H
A.
s
E
R